试图在简单的 HTML 和 JavaScript 琐事游戏上显示分数

Question

对 Javascript 和 jQuery 来说是全新的。我正在用 HTML、CSS 和 Javascript/jQuery 构建这个 Trivia 测验，但遇到了问题。

这是我的完整代码 - https://jsfiddle.net/CeeSt/8wLj1pk2/ 供参考。

这是我的 HTML 和 JS 的 sn-p -

<div class="question">Question1?
  <ul class="answers">
    <li><label><input name="Question0" id="correct" type="checkbox"> Answer1</label></li>
    <li><label><input name="Question0" id="wrong" type="checkbox"> Answer2</label></li>
    <li><label><input name="Question0" id="wrong" type="checkbox"> Answer3</label></li>
  </ul>
</div>

JS文件-

var score = 0;

function Results() {
  if (document.getElementById("correct").checked === true) score++;
  else (alert("Incorrect!"));

}

具体来说，我正在尝试以某种方式显示总分，但我不知所措。我知道它正在识别“正确”答案，但是随着测验的进行显示这一点是我正在努力解决的问题。我知道在纯 JavaScript 中可能有更好的方法来做到这一点，但是如果有任何方法可以挽救这种方法，请帮忙！谢谢！！

Answer 1

您无法使用 id 属性真正做到这一点。但是，您可以使用 value 属性。

然后您需要修改分数字段。我想我在任何地方都没有看到你这样做的地方。

Answer 2

您应该将这些转换为单选按钮，然后评估选定的单选按钮以检查它是否正确：

<div class="question">Question1?
  <ul class="answers">
    <li><label><input name="Question0" value="correct" type="radio"> Answer1</label></li>
    <li><label><input name="Question0" value="wrong" type="radio"> Answer2</label></li>
    <li><label><input name="Question0" value="wrong" type="radio"> Answer3</label></li>
  </ul>
</div>

你的 JS 看起来像这样：

var score = 0;

function Results() {
  if ($("input[name=Question0]:checked").val() == "correct") {
    score++;
  } else {
    alert("Incorrect!");
  }
}

Answer 3

我同意使用单选按钮和值。您可以像这样轻松计算分数：

var score = $('input:checked[value=correct]').length

在此处查看示例：https://jsfiddle.net/wLxr3ooq/

注意：如果您将“value”更改为“id”，它仍然有效...但您应该避免使用重复的 ID

Answer 4

我认为问题在于您将相同的 ID 分配给多个元素，这是不允许的。相反，您可以为它们分配类。因此，在您的情况下，为您各自的元素分配一个 wrong 类和一个 正确 类。然后，在您的 JavaScript 中，尝试以下操作

var x = document.getElementsByClassName("correct");

这将抓取所有具有 正确 类的元素并将它们返回到一个数组中。