Question

下面，我对4个问题进行了小测验，并用CSS隐藏了问题2,3和4，但是您可以尝试从CSS (".pytja2, .pytja3, .pytja4 { display: none;}")删除样式以查看所有问题或将样式设置为display: hidden逐个回答每个问题，您会看到它们。

之所以这样做，是因为我想在单击 Next （下一步）按钮时显示下一个问题，然后每次单击 Next （下一步）按钮后就会显示下一个问题。但是问题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

因此，您在代码中使用ID作为CLASS和.bot选择器时似乎有些困惑。我随意清理并制作它，因此“下一步”按钮将class用作class。如果要在元素上重用名称值，则ID是要使用的语法。 <form>应该特定于DOM中的一个元素。

另外，如果您要创建一个提交所有答案的表单，则最好一次声明for，然后让每组单选按钮为每组问题都包含相同的名称，例如（性别，汽车等），因此在处理表单时，用户可以轻松地抓住每组问题的选定选项。

我还清理了一些CSS来提供帮助，并添加了一个onclick循环，该循环将button函数绑定到表单中的每个Next parentNode.Id，因此每次单击时，它将检查div以查看应隐藏哪些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>

{{1}}

JavaScript问答题

1 个答案: