包含多个问题的 JavaScript 测验

Question

下面我做了一个小测验，有 4 个问题，问题 2,3 和 4 被 CSS 隐藏了，但是你可以尝试从 CSS 中删除样式 (".pytja2, .pytja3, .pytja4 { display: none;}") 查看所有问题，或者为每个问题一一设置 display: hide 样式，您就会看到它们。

我这样做是因为我想在单击下一步按钮时显示下一个问题，然后每次单击下一步按钮后都会显示下一个问题。但是问题 2 有一个问题，它没有显示，并且在控制台日志中没有显示任何错误，我在 JavaScript 上添加了一个函数，当我单击“下一步”按钮时，第一个问题将被隐藏，它将显示下一个问题问题，但我不知道出了什么问题。

<div class="quiz">
        <div id="pytja1">
         <span class="quest1">I am a ?</span> 
        <form class="questions1" action="">
          <input class="correct" type="radio" name="gender" value="male"> Male<br>
          <input type="radio" name="gender" value="female"> Female<br>
          <input type="radio" name="gender" value="other"> Other<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja2">
        <span class="quest2">Football has letters ?</span> 
        <form class="questions2" action="">
          <input class="correct" type="radio" name="gender" value="male"> 7<br>
          <input type="radio" name="gender" value="female"> 5<br>
          <input type="radio" name="gender" value="other"> 6<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja3">
        <span class="quest3">VV stands for ?</span> 
        <form class="questions3" action="">
          <input type="radio" name="gender" value="male"> BMW <br>
          <input class="correct" type="radio" name="gender" value="female"> Volksvagen<br>
          <input type="radio" name="gender" value="other"> Audi<br>  
          <input id="bot" type="button" value="Next">
        </form>
      </div>
      <div id="pytja4">
        <span class="quest4">What year it is ?</span> 
        <form class="questions4" action="">
          <input type="radio" name="gender" value="male"> 2017<br>
          <input type="radio" name="gender" value="female"> 2015<br>
          <input class="correct" type="radio" name="gender" value="other"> 2019<br>  
          <input id="bot-submit" type="submit" value="Submit">
        </form>
      </div>
      </div>

.quiz{
  margin-top: 50px;
  margin-left: 40%;
  width: 250px;
  height: 100px;
  background-color: coral;
}
.quest1{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
}
.quest2{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest3{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest4{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.questions1{
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}
.questions2{
  margin-left: 28px;
  background-color: red;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions3{
  margin-left: 28px;
  background-color: greenyellow;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions4{
  margin-left: 28px;
  background-color: olivedrab;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.bot{
  margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
  display: none;
}
/* End of Quiz*/

let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');


nextQuestion.onclick = function () {
    if (nextQuestion === question1) {
        question1.style.display = 'none'
    } else if (nextQuestion === question2) {
        question2.style.display = 'block'
   }
}

Answer 1

因此，您对 bot 的使用似乎存在一些困惑。作为ID并作为 CLASS代码中的选择器。我冒昧地清理了它并使其“下一步”按钮使用 .bot作为class 。如果您要在元素上重复使用名称值，class是要使用的语法。 ID应该特定于 DOM 中的一个元素。

此外，如果您要创建一个表单来提交所有答案，最好声明 <form>一次，然后让每组单选按钮包含每组问题的相同名称，例如(性别、汽车等)，因此当您处理表单时，可以轻松获取用户为每组问题选择的选项的问题。

为了提供帮助，我还清理了一些 CSS，并添加了 for绑定(bind) onclick 的循环功能到每个下一个button在表单中，因此每次单击时，它都会检查 parentNode.Id看什么div它应该隐藏并使其对每个下一个问题 block 可见的元素。这个for循环是通过引用类.bot来实现的使用document.querySelectorAll('.bot');

如果您还有任何其他问题或需要我进一步解释我在以下代码段中所做的更改，请告诉我:

let question1 = document.getElementById('pytja1');
let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let result = document.getElementById('bot-submit');
let nextButtons = document.querySelectorAll('.bot');

for (let i = 0; i < nextButtons.length; i++) {
  let nextQuestion = nextButtons[i];
  nextQuestion.onclick = function() {
    switchToNextQuestion(this);
  }
}

function switchToNextQuestion(nextQuestion) {
  let parentId = nextQuestion.parentNode.id;
  if (parentId === 'pytja1') {
    question1.style.display = 'none';
    question2.style.display = 'block';
  } else if (parentId === 'pytja2') {
    question2.style.display = 'none';
    question3.style.display = 'block';
  } else if (parentId === 'pytja3') {
    question3.style.display = 'none';
    question4.style.display = 'block';
  }
}

result.onclick = function() {
  alert('I am submitting the quiz!');
}

form {
  width: 100%;
  position: relative;
  float: left;
  padding-top: 50px;
}

.quiz {
  margin: 0px auto;
  width: 250px;
  height: 100px;
}

.quest1,
.quest2,
.quest3,
.quest4 {
  background-color: cadetblue;
  font-size: 22px;
}

.questions1 {
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}

.questions2 {
  background-color: red;
}

.questions3 {
  background-color: greenyellow;
}

.questions4 {
  background-color: olivedrab;
}

.bot {
  margin-top: 10px;
}

#pytja2,
#pytja3,
#pytja4 {
  margin-left: 28px;
  display: none;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}


/* End of Quiz*/

<form id="quiz-form">
  <div class="quiz">
    <div id="pytja1" class="questions1">
      <span class="quest1">I am a ?</span><br/>
      <input type="radio" name="gender" value="male" class="correct"> Male<br/>
      <input type="radio" name="gender" value="female"> Female<br/>
      <input type="radio" name="gender" value="other"> Other<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja2" class="questions2">
      <span class="quest2">Football has # letters ?</span><br/>
      <input type="radio" name="football" value="8" class="correct"> 8<br/>
      <input type="radio" name="football" value="5"> 5<br/>
      <input type="radio" name="football" value="6"> 6<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja3" class="questions3">
      <span class="quest3">VW stands for ?</span><br/>
      <input type="radio" name="car" value="BMW" /> BMW <br/>
      <input type="radio" name="car" value="Volkswagen" class="correct" /> Volkswagen<br/>
      <input type="radio" name="car" value="Audi" /> Audi<br/>
      <input class="bot" type="button" value="Next" />
    </div>
    <div id="pytja4" class="questions4">
      <span class="quest4">What year it is ?</span><br/>
      <input type="radio" name="year" value="2017" /> 2017<br/>
      <input type="radio" name="year" value="2015" /> 2015<br/>
      <input type="radio" name="year" value="2019" class="correct" /> 2019<br/>
      <input id="bot-submit" type="submit" value="Submit" />
    </div>
  </div>
</form>