重复提示字段，直到条件为真

Question

我正在尝试用 JavaScript 和 html 做一个小测验。要求用户在提示字段中输入问题的答案，用户回答并将正确答案发送到比较它们的功能。如果减去正确答案的答案为零，则该函数将 return 一个点。如果不是这样，该函数将不会 return 一个点。如果用户的答案不是 1-3，则函数会发出无效输入警报。这里的一切都有效，但是我想添加一个功能，使代码在用户回答无效时再次询问相同的问题，换句话说不是 1-3。我试过使用 while 循环但无法让它工作。关于如何解决这个问题的任何建议 and/or 任何其他使代码更结构化的技巧。

<!DOCTYPE HTML>

<HTML>
  <HEAD>
    <META CHARSET="UTF-8">
    <TITLE>Quiz</TITLE>
  </HEAD>
  <BODY>
    <SCRIPT TYPE="text/javascript">
      
      var points = 0;

      var answer = parseInt(prompt("Which animal is not a mammal?  \n 1. Shark   \n 2. Dolphin   \n 3. Whale"));
      correctanswer = 1;
      control(answer, correctanswer);

      answer = parseInt(prompt("Which country is not in asia?  \n 1. Georgia   \n 2. Ukraine   \n 3. Iran"));
      correctanswer = 2;
      control(answer, correctanswer);

      answer = parseInt(prompt("What is amazons founder named?  \n 1. Jeff Bezos   \n 2. Kenneth Spielberg  \n 3. Elon Musk"));
      correctanswer = 1;
      control(answer, correctanswer);

      answer = parseInt(prompt("Which element are diamonds made of?  \n 1. Platinum   \n 2. Iron   \n 3. Carbon"));
      correctanswer = 3;
      control(answer, correctanswer);

      answer = parseInt(prompt("Which gases make up the biggest part of the atmosphere?  \n 1. Oxygen and carbondioxide   \n 2. Nitrogen and oxygen   \n 3. Oxygen and hydrogen"));
      correctanswer = 2;
      control(answer, correctanswer);

      answer = parseInt(prompt("Which country is not in the EU?  \n 1. Lithuania   \n 2. Croatia   \n 3. Bosnia"));
      correctanswer = 3;
      control(answer, correctanswer);

      function control(answer, correctanswer) {
        if(answer < 1 || answer > 3 || isNaN(answer)) {
        alert("Invalid input! Try again!");
      }
        else if((answer - correctanswer) == 0) {
        return points += 1;
        }
      }

      document.write("You got: " + points + " total points of  6 .")

    </SCRIPT>
  </BODY>
</HTML>

Answer 1

用以下函数替换您的部分代码。

function askQuestion(question, correctAnswer) {
   let answer = parseInt(prompt(question));
   control(answer, correctAnswer);

   if (answer !== 1 && answer !== 2 && answer !== 3) {
      askQuestion(question, correctAnswer);
   }
}

这将使您的代码更短，并添加在输入无效时重复问题的功能。

这是在您的代码中实现的 askQuestion() 函数：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Quiz</title>
  </head>
  <body>
    <script type="text/javascript">

    function askQuestion(question, correctAnswer) {
      let answer = parseInt(prompt(question));
      control(answer, correctAnswer);

      if (answer !== 1 && answer !== 2 && answer !== 3) {
          askQuestion(question, correctAnswer);
      }
    }
      
      let points = 0;

      askQuestion("Which animal is not a mammal?  \n 1. Shark   \n 2. Dolphin   \n 3. Whale", 1);

      askQuestion("Which country is not in asia?  \n 1. Georgia   \n 2. Ukraine   \n 3. Iran", 2);

      //Do the same for the rest of the questions...

      function control(answer, correctanswer) {
        if (answer < 1 || answer > 3 || isNaN(answer)) {
        alert("Invalid input! Try again!");
      }
        else if((answer - correctanswer) == 0) {
        return points += 1;
        }
      }

      document.write("You got: " + points + " total points of  6 .")

    </script>
  </body>
</html>

重复提示字段，直到条件为真

Repeat a prompt field until a condition is true

html

javascript

prompt

while-loop