Question

我有一个要加入游戏的div。当我将简单测验的代码放入并单击“完成”按钮时，它将起作用，并且我收到通知，告诉我得分。当我为“中”和“难”添加其他测验代码时，即使我有“其他2隐藏”的DIV，“完成”按钮也根本不起作用。我想做的是隐藏其他困难，直到单击一个按钮，它才会显示出来。现在我还没有为按钮提供任何功能，因为我想通过“完成”按钮来解决问题。

    <!-- Border for the game -->
<form id="divbox3" name="quiz">
  <div class="game-button" style="width:50%">
    <button style="width:33%">Easy</button>
    <button style="width:33%">Medium</button>
    <button style="width:33%">Hard</button>
  </div>

  <br>
  <br>

  <!-- Easy Quiz code -->
  <p class="questions">Most moles have an extra thumb to dig with. <b> True or False? </b></p>
  <input id="textbox" type="text" name="q1">

  <p class="questions">What is the smallest country in the world? <b> Tuvalu - Vatican City - Monaco </b></p>
  <input id="textbox" type="text" name="q2">

  <p class="questions">What is the biggest atom on the periodic table? <b> Uranium - Radon - Radium - Lead </b></p>
  <input id="textbox" type="text" name="q3">

  <p class="questions">Who is the richest man in the world? <b> Bill Gates - Jeff Bezos - Elon Musk </b></p>
  <input id="textbox" type="text" name="q4">

  <input id="button" type="button" value="Finished!" onclick="check();">
</form>


<!-- Border for the game -->
<form id="divbox3med" name="quiz" hidden>

  <br>
  <br>

  <!-- Medium Quiz code -->
  <p class="questions">What type of animal is Bambi</p>
  <input id="textbox" type="text" name="q1">

  <p class="questions">Name a US state beginning with K.</p>
  <input id="textbox" type="text" name="q2">

  <p class="questions">Who wrote the Harry Potter series?</p>
  <input id="textbox" type="text" name="q3">

  <p class="questions">Who wrote 'The Scarlet Letter'?</p>
  <input id="textbox" type="text" name="q4">

  <input id="button" type="button" value="Finished!" onclick="check();">
</form>

<!-- Border for the game -->
<form id="divbox3hard" name="quiz" hidden>

  <br>
  <br>

  <!-- Hard Quiz code -->
  <p class="questions">What chemical element is diamond made of?</p>
  <input id="textbox" type="text" name="q1">

  <p class="questions">What game features the terms love, deuce, match and volley?</p>
  <input id="textbox" type="text" name="q2">

  <p class="questions">Which planet did Superman come from?</p>
  <input id="textbox" type="text" name="q3">

  <p class="questions">How many syllables make up a haiku?</p>
  <input id="textbox" type="text" name="q4">

  <input id="button" type="button" value="Finished!" onclick="check();">
</form>

<div id="scoresheet">
  <p id="number_correct"></p>
  <p id="message"></p>
</div>

这是简单测验的J，其他类似。

function check(){

    var q1 = document.quiz.q1.value;
    var q2 = document.quiz.q2.value;
    var q3 = document.quiz.q3.value;
    var q4 = document.quiz.q4.value;
    var correct = 0;


    if (q1 == "True") {
        correct++;
}
    if (q2 == "Vatican City") {
        correct++;
}   
    if (q3 == "Francium") {
        correct++;
    }
    if (q4 == "Jeff Bezos") {
        correct++;
}

    var messages = ["Amazing!", "Getting there...", "Ouch :/"];
    var score;

    if (correct == 0) {
        score = 2;
    }

    if (correct > 0 && correct < 4) {
        score = 1;
    }

    if (correct == 4) {
        score = 0;
    }

    document.getElementById("scoresheet").style.visibility = "visible";

    document.getElementById("message").innerHTML = messages[score];
    document.getElementById("number_correct").innerHTML = "You got " + correct + " correct.";
    }

https://jsfiddle.net/w1kgqyce/

这就是我目前的情况。其他2个DIV不可见和隐藏。如果没有除EASY之外的其他困难的代码，“完成”按钮将起作用，但是一旦我实现其余部分，它就将不起作用。由于某些原因，我无法在Fiddle上显示我想要的内容。抱歉，我的解释不好，我真的很困惑rn：s 谢谢

Answer 1

在问题上使用唯一的ID。

摆脱输入类上的重复ID-这是语法错误，并且违反了ID如何工作的规则（ID必须是唯一的；如果不是，ID将会起作用...但是所有与之相关的假设如果使用非唯一ID，则DOM会损坏。）将输入类的ID转换为一个类，并为每个输入赋予唯一的ID。

此外-需要查看JavaScript才能做出明确的答案。

但是-我已经看过一百万次，违反ID规则的ID导致表单损坏。那是我什至没有看到JS就回答的唯一原因！

=============

好吧，看着你的小提琴，它变得更清楚了。

按钮需要一个事件侦听器，因此在单击它们时会进行切换正确测验的可见性，并将所有其他内容切换为无形。
每个测验应该有自己的事件来触发您的check（）
更新check（）以使用参数来区分您的测验
最后-区分答案。我在想一种更好的方法是使用对象+困难地在对象中得到答案：

answers = { “ easy”：{“ q1”：“ Answer1”，         “ q2”：“ Answer2”，         “ q3”：“ Answer3”，         “ q4”：“ Answer4”         }

“中”：{“ q1”：“ Answer1”，         “ q2”：“ Answer2”，         “ q3”：“ Answer3”，         “ q4”：“ Answer4”         }

“ hard”：{“ q1”：“ Answer1”，         “ q2”：“ Answer2”，         “ q3”：“ Answer3”，         “ q4”：“ Answer4”         } }

（很抱歉JSON的格式。无法正确显示。）

然后按照以下步骤检查答案：

if (easy) { 
    check = answers.easy; 
}
else if (medium) { 
    check = answers.medium; 
} 
else { 
    check = answers.hard; 
}

然后，当您到达要检查答案的位置时...对照从对象中提取的一组答案进行检查：

if (answer1 == check.q1) {
     // Do what you need done.
}

具有不同级别DIV的简单测验

1 个答案: