Question

我正在尝试创建一个页面，从一组值中一次显示一个单词，持续5秒。在本页面也是一个带有一个输入字段的表单，人们在其中输入拼写该单词的尝试。

我想捕获在包含

的对象中的字段中输入的值的结果

用户输入的值和正确答案（即下面spellings数组中显示的值）
正确答案的数量
一组不正确的答案

并将其发回给应用程序

到目前为止，我有以下内容，但它甚至没有正确地循环数组。此外，我想我需要动态更新表单输入，以便我知道哪个尝试与哪个单词相关。

<script>
var spellings = ['first', 'second', 'third', 'fourth', 'fifth'];

setInterval(function() { 
    for (var i=0; i<=spellings.length; i++){
      document
        .getElementById('spellings')
        .innerHTML = spellings[i]; 
      }   
  }, 1000);
</script>

和HTML

<span id="spellings"></span>

<form action="/spellings" method="POST">
  <div class="form">
    <label for="spelling">spelling</label>
    <input type="text" class="form-control" id="spelling" name="spelling"> 
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

编辑 - 下面评论中要求的更多上下文在<span id="spellings"></span>中，我想在spellings数组中显示每个项目5秒钟。

在每个单词下面显示的表单中，我想捕获用户的输入并最终将其POST回应用程序

任何有关如何做到这一点的帮助都很棒

Answer 1

这应该让你去。请注意，警报现在每隔几秒发生一次，您可能希望重定向到新页面或此时回发到服务器。此外，您可以对此进行改进，以包含“未尝试过的”＃39;错误的答案，这只会显示提交的错误答案。

＆＃13;

let spellingWords = ['first', 'second', 'third', 'fourth', 'fifth'];
let spellingItems = spellingWords.length;
let spellingItemShown = 0;
let rightAnswers = 0;
let wrongAnswers = [];

setInterval(function() {    
     if (spellingItemShown < spellingItems){
          document.getElementById('spellings').innerHTML = spellingWords[spellingItemShown]; 
     spellingItemShown ++;
     } else{
        //We're done!
        alert(rightAnswers + " right answers out of " + spellingItems + ".  Incorrect answers were: " + wrongAnswers);
        //Redirect or post to server desired info....
     }

  }, 5000);

function checkAnswer(){
  if (document.getElementById('spellings').innerHTML == document.getElementById('spelling').value){
    rightAnswers ++;
  } else {
    wrongAnswers.push(document.getElementById('spellings').innerHTML);
  }
}

＆＃13;

<h2 id="spellings"></h2>

<label for="spelling">spelling</label>
<input type="text" class="form-control" id="spelling" name="spelling"> 
<button class="btn btn-primary" onclick="checkAnswer()">Check Answer</button>

＆＃13;

循环遍历数组并构建表单

1 个答案: