如何在 JavaScript 测验中修复我的 for 循环？答案

【问题标题】：How can I fix my for loop in a javascript quiz?如何在 JavaScript 测验中修复我的 for 循环？
【发布时间】：2020-04-19 18:13:04
【问题描述】：

我正在使用单个 HTML 页面进行 javascript 测验。出于某种原因，我的代码只会显示一个问题，并且在单击该元素时，它不会转到下一个问题。而且它不会从第一个问题开始测验。

我在for 循环中使用了for 循环。第一个循环呈现问题，然后另一个循环呈现其相应的选择。问题和选择保存在包含对象的数组中。

我只用 Javascript 和 jQuery 编码几个星期，所以你必须用初学者的术语告诉我。我将不得不重构它。我为它有些混乱而道歉。

我尝试取出return 命令。与preventDefault 相同，没有变化。

function renderQuiz(i) {
  $heading.text("");
  $mainDiv.text("");
  $heading.text(quizQuestions[i].question);

  for (var j = 0; j < quizQuestions[i].choices.length; j++) {
    //console.log(quizQuestions[0].choices.length);
    var li = document.createElement("li");
    li.innerText = JSON.stringify(quizQuestions[i].choices[j]);
    $mainDiv.append(li);
  };

  $('li').on("click", function() {
    if (event.target.matches('li')) {
      event.preventDefault();
      var guess = event.target.innerText;
      var answer = (JSON.stringify(quizQuestions[i].answer[0]));
      if (guess === answer) {
        timeLeft += 10;
        console.log(timeLeft + "it works");
      } else {
        timeLeft -= 10;
        console.log(timeLeft)
      };
    }
  });
  return;
};

mainPage();

$button.on("click", function(click) {
  event.preventDefault();
  for (var i = 0; i < quizQuestions.length; i++) {
    renderQuiz(i);;
  }
});

【问题讨论】：

标签： javascript jquery for-loop nested-loops

【解决方案1】：

$button 点击事件遍历所有问题，这就是为什么最后一个问题是显示的问题。

您需要在 $button 点击函数之外定义变量 i，然后在每次点击按钮时递增 i。

var i = -1;

function renderQuiz(i) {
  ...
};

mainPage();

$button.on("click", function(click) {
  event.preventDefault();
  renderQuiz(++i);
});

【讨论】：

【解决方案2】：

$button onclick 处理程序中存在错误（在您的控制台中，您应该有“Uncaught ReferenceError: event is not defined”）。

如果函数将 click 作为参数，那么您应该将方法 preventDefault() 应用于相同的参数。换句话说，而不是

$button.on("click", function(click) {
  event.preventDefault();

你应该有

$button.on("click", function(event) {
  event.preventDefault();

顺便说一下这里有同样的错误

$('li').on("click", function() {

你应该有

$('li').on("click", function(event) {

希望对你有所帮助。

【讨论】：