如何循环 Q 和 A 数组？答案

【问题标题】：How to loop through Q and A array?如何循环 Q 和 A 数组？
【发布时间】：2020-09-21 13:55:45
【问题描述】：

我有一系列乘法问题。我想通过每一个，显示问题，输入答案，并提供反馈。如果这是正确的回答，那么我想继续回答数组中的下一个问题。我意识到for-loop 在这里可能是错误的，但这是我能想到的。下面的代码不运行。我感谢所有帮助。提前致谢！

pracOnly = ['4*2=','3*3=','5*5=']
var pracAnswer = 0;


for (var i = 0; i < pracOnly.length; i++) {
  pracAnswer = pracOnly[i][0] * pracOnly[i][2];
  document.getElementById("prac").innerHTML = pracOnly[i];
  var userPracAns = document.getElementById("p").value;
  if(i == 0) {break;};
  if (userPracAns == pracAnswer) {
    alert('Correct!');
    i = i + 1;
  } else {
    alert('Not correct')
  }
};

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css">
    <meta charset="utf-8">
    <title>Multiplication</title>
  </head>
  <h1>Test</h1>
  <body>
  </section>

  <section>
  <span id='prac'></span>
  <input type="number" id='p'>
  <button type="button" onClick="practiceAnswer()">Answer</button>

  </section>
  </body>
  <script src="main.js" charset="utf-8"></script>
</html>

【问题讨论】：

太多未定义。您还手动设置i=i+1，这将导致数组项在循环中跳过。我想你在这里咬的比你能嚼的还多。一次一行，使用 console.log 显示你得到的内容并修复你想要使用的每个变量。从 pracAnswer = pracOnly[i][0] * pracOnly[i][2]; 开始，因为据我所知， pracOnly[i] 是 '4*2=' 而不是数组，所以 pracOnly[i][0] 将是未定义的。

标签： javascript html for-loop

【解决方案1】：

首先，确保您声明pracOnly。不要使用未声明的变量。还可以考虑在 javascript 代码中添加事件侦听器，而不是在 HTML 中使用 onclick 属性。

就您的问题中所述的问题而言，您不需要循环。您只需跟踪当前正在显示的问题的索引，一次只显示一个问题。

一旦用户点击Answer 按钮，检查答案是否正确。如果是，请清除输入并显示下一个问题。否则向用户显示提示答案不正确的提示。

在用户回答完所有问题后，您可能想通知用户他们已经回答了所有问题。

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;
var index = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    showNextQuestion();
  } else {
    alert('Not correct');
  }
});

function showNextQuestion() {
  if (index == pracOnly.length) {
    return endQuiz();
  };

  pracAnswer = pracOnly[index][0] * pracOnly[index][2];
  span.innerHTML = pracOnly[index];
  index++;
}

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}

showNextQuestion();

<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

使用生成器函数的替代解决方案

或者，您可以使用generator 函数并使用循环遍历数组并一次显示一个问题。这是可行的，因为即使使用循环，生成器函数的执行也可以暂停。

var pracOnly = ['4*2=', '3*3=', '5*5='];
var pracAnswer = 0;

var input = document.getElementById('p');
var span = document.getElementById('prac');
var answerBtn = document.querySelector('button');

function* showNextQuestion() {
  for (const question of pracOnly) {
    pracAnswer = question[0] * question[2];
    span.innerHTML = question;
    yield question;
  }

  endQuiz();
}

var questionGenerator = showNextQuestion();
questionGenerator.next();

answerBtn.addEventListener('click', function practiceAnswer() {
  if (input.value == pracAnswer) {
    alert('Correct!');
    input.value = '';
    questionGenerator.next();
  } else {
    alert('Not correct');
  }
});

function endQuiz() {
  span.innerHTML = 'Quiz ended.';
  input.style.display = 'none';
  answerBtn.style.display = 'none';
}

<section>
  <span id="prac"></span>
  <input type="number" id="p" />
  <button type="button">Answer</button>
</section>

【讨论】：