Question

我是JavaScript的初学者，我正在尝试做一个问答游戏，以学习操纵DOM。我知道也有类似的问题，很遗憾，我找不到我的情况的答案。

我有这个HTML结构：

<div class="wrapper">
  <h1>Test your knowledge</h1>
  <form class="box" id="quizBox1">
    <div class="question1">
      <p>What is the name of George?</p>
      <div class="inputs">
        <input id="answer" type="radio" name="quiz1" value="wrong">Tom
        <input id="answer" type="radio" name="quiz1" value="correct">George
        <input id="answer" type="radio" name="quiz1" value="wrong">John<br>
        <input type="submit" name="quiz1" class="button" id="answer" onclick="return quiz();">
      </div>
    </div>
  </form>

  <form class="box" id="quizBox2">
    <div class="question2">
      <p>Which one is blue?</p>
      <div class="inputs">
        <input id="answer" type="radio" name="quiz2" value="wrong">Banana
        <input id="answer" type="radio" name="quiz2" value="correct">Sky
        <input id="answer" type="radio" name="quiz2" value="wrong">Red BMW<br>
        <input type="submit" name="quiz2" class="button" id="answer" onclick="return quiz();">
      </div>
    </div>
  </form>
</div>

基本上，我有两种形式的问题，形式各不相同（但我想在发现问题后再添加更多形式）。我已经设法找出如何跟踪是否选择了正确答案并添加正确答案的数量以显示在末尾。

这个JavaScript：

function quiz () {
  var amountCorrect = 0;
  for(var i = 1; i <=12; i++)
    var radios = document.getElementsByName("quiz"+1);
  // var questions = document.getElementByIdName("quizBox"+1);

  for(var j = 0; j < radios.length; j++) {
    var radio = radios[j];
    if (radio.value === "correct" && radio.checked) {
      alert("correct");
      amountCorrect ++;
      questions.style("display", "none");
    } else if (radio.checked && radio.value != "correct") {
      alert("not");
    }
  }
  alert(amountCorrect);
}

我的问题是，一旦回答了当前的问题，我就无法弄清楚如何交换到另一个问题。我每次尝试设置一个新变量并显示下一个问题块，同时隐藏其他问题，但是我找不到使它起作用的方法。如果可能的话，我想在香草JS中实现此功能，而无需使用jQuery。感谢您提供任何帮助，即使它可以帮助我走上正确的轨道！

Answer 1

您可以对测验功能进行一些小的更改。添加一个参数，使其知道要查看的单选按钮。

function quiz(p) {
.....getElementsByName(p);
}

然后将其称为不同的集合。 quiz（“ quiz1”）;

还可以显示和隐藏表单，您可以执行类似的操作

let a = document.gelElementById("quizBox1);
a.style.display = "none";

并在需要显示该属性时将其更改为block。

Answer 2

有一个常见的模式。

如果您有一堆测验题，例如

<div class='quiz' id='quiz1'>
...
</div>

<div class='quiz' id='quiz2'>
...
</div>

首先选择它们并使其隐藏

let quizzes = document.querySelectorAll(".quiz");
for (let i = 0; i < quizzes.length; i++) {
  quizzes[i].style.display = "hidden";
}

然后设置您要显示的那个

document.getElementById(quizIWantToShow).style.display = "block";

如何使用原始JavaScript函数遍历以下块？

2 个答案: