带多个问题的JavaScript测试

下面我做了一个小测验，有4个问题，问题2、3和4是用CSS隐藏的，但是你可以尝试从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>

---

因此，在代码中将

bot

用作

ID

和

CLASS

选择器时，似乎存在一些混淆。我冒昧地清理了它，使其成为下一个按钮使用

.bot

作为

类

。如果要在元素上重复使用名称值，

class

是要使用的语法

ID

应该特定于DOM中的一个元素

此外，如果您要创建一个表单来提交所有答案，最好声明一次

，然后让每组单选按钮包含每组问题的相同名称，例如（性别、汽车等），这样在处理表单时，用户就可以很容易地获取每组问题的选定选项

我还清理了一些CSS以提供帮助，并添加了一个

for

循环，该循环将

onclick

函数绑定到表单中的每个Next

按钮

，因此每次单击时，它都会检查

parentNode.Id

，以查看它应该隐藏哪些

div

元素，并使每个下一个问题块可见。通过使用

document.querySelectorAll（'.bot'）引用类
.bot
，可以实现
for
循环

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


let question1=document.getElementById（'pytja1'）；
让question2=document.getElementById（'pytja2'）；
让问题3=document.getElementById（'pytja3'）；
让question4=document.getElementById（'pytja4'）；
让结果=document.getElementById（'bot-submit'）；
让nextButtons=document.querySelectorAll（'.bot'）；
for（设i=0；i

表单{
宽度：100%；
位置：相对位置；
浮动：左；
填充顶部：50px；
}
.测验{
保证金：0px自动；
宽度：250px；
高度：100px；
}
.quest1，
.quest2，
.quest3，
.quest4{
背景色：卡德蓝；
字体大小：22px；
}
.问题1{
左边距：28px；
背景色：青色；
宽度：220px；
填充：10px；
字体大小：20px；
}
.问题2{
背景色：红色；
}
.问题3{
背景颜色：绿黄色；
}
.问题4{
背景色：淡褐色；
}
.机器人{
边缘顶部：10px；
}
#pytja2，
#pytja3，
#pytja4{
左边距：28px；
显示：无；
宽度：220px；
填充：10px；
字体大小：20px；
}
/*测验结束*/

我是一个？

男性

女性

其他

足球有字母？

8

5

6

大众代表什么？

宝马

大众汽车

奥迪

现在是几年？

2017年

2015年

2019年

没有id为的元素
bot
。有些元素带有
class=“bot”
@AlexKudryashev，实际上第一个问题就有。他的代码有点凌乱和不一致。只是出于好奇，但是您是否考虑过在用户单击“下一步”按钮转到下一个问题时使用XHR/Ajax请求从服务器检索下一个问题？然后，您可以用问题/答案填充每个相应的div，这将阻止用户查看您的源代码并修改可见性。我知道这超出了你的要求，但可能值得思考…@Woodrow我想做一个没有Ajax或PHP的简单项目，因为我还没有学会Ajax，你可以简单地将未来的问题存储在JS对象中，并在按下next时生成它们。另外，在类似的元素中使用一个公共类，以避免重复您的代码-一个简单的.quest和.question测试将使您的代码部分减少75%。非常感谢您的帮助，甚至像我计划的那样进行一次测试，谢谢：）只是一个问题，为什么您使用“if（parentId=='pytja1'），为什么您没有像这样使用按钮Next”if（nextButtons===='pytja1'）”，问这个问题是因为我需要首先单击按钮Next并与“pytja1”、“pytja2”等进行比较。不客气。我之所以做parentId=='pytja1'，是因为当你单击下一个按钮时，onclick事件将检查父节点（）“下一步”按钮是的子按钮，用于确定用户在测验步骤中的位置。这允许该功能确定在你进行测验时如何隐藏/显示每个问题。如果你
.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'
   }
}