我是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。 感谢您提供任何帮助,即使它可以帮助我走上正确的道路!

#1楼 票数:0

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

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

然后将其称为不同的集合。 测验( “quiz1”);

另外,要显示和隐藏表单,您可以执行以下操作

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

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

#2楼 票数:0

有一个通用的模式。

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

<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";

  ask by Vikintas Raudavicius translate from so

未解决问题?本站智能推荐:

3回复

使用普通JavaScript遍历文本节点

var history = document.getElementById('tooltip') console.log(history) <!DOCTYPE html> <html> <head> <meta charset="utf-8"
1回复

如何使用纯JavaScript编写以下JQuery函数?

我试图用透明图像构建一个配置器。 现在,图像配置器通过一个简单的JQuery函数工作:我给每个输入元素一个数据属性,我称之为data-Image。 该函数捕获选定选项的数据图像,并将其加载到元素的内联样式中。 $("#configurator").change(function(){
1回复

同时使用普通javascript和jquery两次调用同一函数

执行这段代码会引起什么问题? function function1() { $(document).ready(function() { $("#button").click(function() { $("button").hide(); }); }); } <scrip
3回复

如何使用javascript函数重用HTML代码块?

我试图在多个位置和页面中使用相同的HTML块,同时保持较少的代码行数和较低的冗余度。 基本上,我需要一个与调用该函数时类似的功能,该功能只会将HTML代码加载到页面中-这将在页面加载时完成,因此无需单击或触发它的其他操作。 我不想使用PHP包含。 例: <div cla
1回复

使用普通JavaScript调用XHR

我遇到了从localhost对GitHub域进行XHR调用的问题。 单击按钮Click to get User Profile with Ajax+JS将调用JS函数getUser() 。 代码按预期工作,即获取特定的GitHub用户详细信息(全名和头像)并显示在页面上。 但是,当我使
4回复

如何在html块内遍历JavaScript变量?

我正在尝试将html块传递给电子邮件服务Nodemailer JS函数(我正在使用Node.JS)。 我有一个需要在电子邮件中发送的items数组: 这是JS函数。 我正在使用<table>标记来放置items数组的元素。 我可以在将其发送到函数之前将其放入JS变量中,但是
5回复

如何在其他函数的函数下使用javascript中定义的变量。以下是我的确切Javascript代码

以上是我的代码,出现以下错误 该代码不起作用。 我试图从showPosition Fucntion中使用lat和lon,但是它说lat和lon没有定义。 我通过不使用var关键字制作了lat和lon全局变量。 但他们没有工作。 请任何人帮助我。
2回复

使用普通JavaScript创建普通制表功能

我想知道如何创建一种制表功能,如纯JavaScript中jQuery UI提供的那种功能。 我真的不知道该怎么做,因为主要原因是我无法理解它! 因此,我基本上需要帮助的是能够创建功能的逻辑。 有些事情我无法理解,例如,单击选项卡后如何将样式从一个元素(选项卡)转换为另一元素(选项卡)?