使用重置按钮重置测验

时间:2016-11-02 03:22:42

标签: javascript html

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

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);
      };

   }
};

1 个答案:

答案 0 :(得分:0)

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

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

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

必需

  • button#fullResetEventListener已添加
  • #mainContent加入<form>
  • <input type='reset'>加入

推荐

  • #choices<fieldset>
  • #theTitle
  • <legend>
  • #answer加入<input type='hidden'>

规范

  • <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>