繁体   English   中英

如何使用普通JavaScript函数遍历以下块?

How to loop through following blocks using vanilla JavaScript function?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

2 个回复

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

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

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

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

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

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

有一个通用的模式。

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

<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";
5 遍历基本块而不遍历函数

如果我想检查给定程序中的所有块,而与每个函数所属的函数无关,除了对函数进行迭代以及对每个块进行迭代之外,还有其他方法可以这样做吗? 也就是说,在函数迭代器中使用块迭代器而不是块迭代器... ...

2018-04-16 04:08:33 0 72   llvm
7 如何使用块替换普通委托

一类: 在下面的方法中,我使用块替换公共委托。 可以吗 didSelectRowAtIndexPath方法中的块,我用它代替了公共委托,但是如果运行,我单击表单元格,代码崩溃。 B班: ...

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

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

9 Javascript遍历块/分组数组

在一种情况下,我有一个包含数千个项目的数组,首先我将该数组分成每个组1000个块的组,然后调用一个函数,该函数处理数组中的第一个块,并返回新的分组块。 使用分组块数组调用LoopArrayGroups方法,然后处理第一个块,将其删除,然后返回新的分组块, 我只想遍历组数组直到它们变 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM