Question

这里有新的堆栈溢出。我的问题是这个测验重置按钮我可能做错了什么？我已将其设置为如果在测验结束时单击重置按钮，则测验应返回到第一个问题。但是，按钮无效。我在想我可能有可变的范围问题，但我试图适应这一点，我仍然无法让重置按钮工作。提前谢谢。

HTML：

<html>

<head>
   <title>Hello...</title>

</head>

<body>
   <h1 id="theTitle" class="highlight summer">BATMAN QUIZ!</h1>

   <div id="mainContent">
      <div id="question">
      </div>
      <div id="choices">
         <input type="radio" name="choices" /><label id="choice1" class="radios"></label></br>
         <input type="radio" name="choices" /><label id="choice2" class="radios"></label></br>
         <input type="radio" name="choices" /><label id="choice3" class="radios"></label></br>
         <input type="submit" id="submitButton" value="Submit" /></br>
         <input type="submit" class="hidden" id="nextButton" value="Next Question" />
      </div>

      <div class="hidden" id="answer">
      </div>
   </div>

</body>

</html>

CSS：

.hidden{
   display:none;
}

.visible{
   display:inline;
}

JavaScript的：

var questionArray = [
   ["What is Batman's first name?", "Bruce Wayne"],
   ["What city does Batman live in?", "Gotham"],
   ["What is Commisioner Gordon's daughter's name?", "Barbara"]
];

var choicesArray = [
   ["Bruce Wayne", "Clark Kent", "Charles Xavier"],
   ["Metropolis", "Starling City", "Gotham"],
   ["Helen", "Barbara", "Jean"]
]

i = 0;
theQuiz(i);

function theQuiz(i) {
   if (i < questionArray.length) {
      var score = 0;

      document.querySelector("#question").textContent = questionArray[i][0];
      document.querySelector("#answer").textContent = "The correct answer is: " + questionArray[i][1];

      document.querySelector("#choice1").textContent = choicesArray[i][0];
      document.querySelector("#choice2").textContent = choicesArray[i][1];
      document.querySelector("#choice3").textContent = choicesArray[i][2];

      var answer = document.querySelector("#answer");

      var submitButton = document.querySelector("#submitButton")
      submitButton.addEventListener("click", showAnswer, false);

      var nextButton = document.querySelector("#nextButton")
      nextButton.addEventListener("click", nextQuestion, false);

      function showAnswer() {
         answer.classList.add("visible");
         nextButton.classList.add("visible");
      };

      function nextQuestion() {
         answer.classList.remove("visible");
         nextButton.classList.remove("visible");
         i++;
         theQuiz(i);
      };

   } else {

      document.body.textContent = "Game Over!";
      var restartButton = document.createElement("input")
      restartButton.type = "submit";
      restartButton.value = "Play Again!"
      document.body.appendChild(restartButton);
      i=0;
      theQuiz(i);
      restartButton.addEventListener("click", resetGame, true);
      function resetGame() {
         i = 0;
         theQuiz(0);
      };

   }
};

Answer 1

如果您想刷新整个页面：location.reload();

如果您想在测验中重置您所在的位置：

将整个测验包裹在<form>中并添加此<input type='reset'>即可。添加并更改了以下内容：

必需

button#fullReset和EventListener已添加
#mainContent加入<form>
<input type='reset'>加入

规范

<label>上的ID无用，请遵循以下模式：

  <label for='rad1'>Radio 1</label>
  <input id='rad1' name='rads'>

<br>或<br/> 从不 </br>

段

<html>

<head>
  <title>Hello...</title>

</head>

<body>


  <form id="mainContent">

    <fieldset id="choices">
      <legend>
        <h1 id="theTitle" class="highlight summer">BATMAN QUIZ!</h1>
      </legend>
      <input type="radio" name="choices" />
      <label id="choice1" class="radios"></label>
      <br>
      <input type="radio" name="choices" />
      <label id="choice2" class="radios"></label>
      <br>
      <input type="radio" name="choices" />
      <label id="choice3" class="radios"></label>
      <br>
      <input type="submit" id="submitButton" value="Submit" />
      <br>
      <input type="submit" class="hidden" id="nextButton" value="Next Question" />


      <input type="hidden" id="answer">
      <input type='reset'>
      <button id='fullReset'>Full Reset</button>

    </fieldset>
  </form>

  <script>
    var fullReset = document.getElementById('fullReset');

    fullReset.addEventListener('click', function(e) {
      location.reload();
    }, false);
  </script>
</body>

</html>

使用重置按钮重置测验

1 个答案:

必需

推荐

规范

段