javascript - 我怎样才能让我的功能按计划运行？我的逻辑有错吗？ (长的)

Question

对于这个含糊/“个人”的问题，我们深表歉意。我很难弄清楚为什么我的代码没有像我想要的那样工作。本质上，我的程序是一个数学游戏。我正在尝试制作一个“重新测验”功能，让你重做你做错的数学题。

所以我有一个名为加法的函数:

function addition()  { //addition function

 function generateNumber() { //generateNumber is a function that creates 2 numbers based on the user's input from cookies
 var n1= Math.floor(Math.random() * (cookiearray[2] - cookiearray[1]) + cookiearray[1]);  //n1 is equal to a random number between the user input. It grabs values from the cookie array.
 var n2= Math.floor(Math.random() * (cookiearray[2] - cookiearray[1]) + cookiearray[1]); //n2 is also a random number.
 document.getElementById("question").innerHTML = n1 + " + " + n2 + "=" ; //this asks the user the question
 window.answer = n1+n2;

 } //end of generateNumber function

 generateNumber(); //calls the generateNumber function.


 }

该函数只是生成 2 个随机数并要求您将其相加。现在，为了让计算机知道答案，我将其存储为名为“answer”的全局变量。

然后，我使用 jQuery 来评估答案。如果按下 Enter 键，则会检查答案是否等于用户输入的内容。如果错误，则计算机将问题放入一个数组中，并将该问题的答案放入另一个数组中:

$("#input").keyup(function(event){ //targets the input box
if(event.keyCode == 13){ //when enter is pressed


    if(answer == $('#input').val()){ //evaluate if the input value was equal to the global variable answer (from game.js)

     //if it is the correct answer...


     score += 1; //add score by 1
     document.getElementById("score").innerHTML = "Score: " + score ; //print score

      addition();
     $('#input').val('') //clears text box for next question

  } 

  else {
     //if the input answer was incorrect...

  requizQuestions.push(display1);
  requizAnswers.push(answer);
  document.getElementById("incorrect").innerHTML +=  "<br />" + "The answer to " + display1 + " was " + answer + " not " + $('#input').val();
  addition();
  $('#input').val('') //clears text box for next question

  }


} //end if statement (with keycode)

无论哪种方式，当用户正确/错误时，都会再次调用加法函数。

现在，我真正的问题是如何显示问题并使其“覆盖”加法函数创建的内容(称为答案和问题的变量)。我应该如何创建一个函数来执行此操作？我目前的代码并没有做到这一点......

function requiz() {
var i = 0;
window.answer = requizAnswers[i];
document.getElementById("question").innerHTML = requizQuestions[i];

 $("#input").keyup(function(event){ //targets the input box
if(event.keyCode == 13){ //when enter is pressed


  if(answer === $('#input').val()){ //evaluate if the input value was equal to the global variable answer (from game.js)


  i+=1;
  window.answer = requizAnswers[i];
  document.getElementById("question").innerHTML = requizQuestions[i];   


  } else {
//didn't know what to put here  
  }



} //end if statement (with keycode)





   });


   }

Answer 1

我想我会采取稍微不同的方法。预先生成所有问题及其答案，并将其存储在数组中。然后，从数组中删除一个问题并将其显示给用户——如果他们回答不正确，则将该问题添加到列表的后面。一旦数组为空，测验就结束。这是一个工作示例:

var questions = [];
var question = null;
var min, max;

function startGame() {
  min = Number(prompt("Enter your min value", 0));
  max = Number(prompt("Enter your max value", 10));
  let numberOfQuestions = Number(prompt("Enter number of questions", 5));

  //pre-create all questions
  for(let i = 0; i < numberOfQuestions; i++) {
    questions.push(generateNumber());
  }

  askNext();
}

function askNext() {
  //clear the answer box
  $("#answer").val("");

  //update the question
  if (questions.length > 0) {
    //get the next question out of the array
    question = questions.shift();
    $("#question").text(question.question);
  } else {
    $("#question").text("Done");
  }
}

function generateNumber() { //generateNumber is a function that creates 2 numbers based on the user's input from cookies
  var n1= Math.floor(Math.random() * (max - min) + min);  //n1 is equal to a random number between the user input. It grabs values from the cookie array.
  var n2= Math.floor(Math.random() * (max - min) + min); //n2 is also a random number.
  var question = n1 + " + " + n2 + " = " ; //this asks the user the question
  var answer = n1+n2;
  return {
    question : question,
    answer : answer
  };
}

$(function() {
  startGame();
  $("#answer").on("keyup", function(e) {
    if (e.keyCode === 13) {
      //get the number the user entered
      let answer = Number(this.value);

      //if it's wrong, add to the end of the question list
      if (answer !== question.answer)
        questions.push(question);

      //continue with the next question
      askNext();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="question">
</span>
<input id="answer" />