为什么我为不同的条件放了不同的 if 语句却只输出一个？

Question

我编写的代码有一些简单的数学问题。当用户按下提交时，if 语句将确定文本框是否为空或是否有一些输入。我放了一个 if 语句，如果用户答对了问题，它就会记录下来。写正确，如果它是空的，它会写 not answered 等等。取而代之的是，无论文本框是否为空或答案是否错误，它都会输出正确的结果。我知道 document.write 不受欢迎，但我是初学者所以请帮助我。

document.getElementById("q1");
document.getElementById("q2");
document.getElementById("q3");
document.getElementById("q4");
document.getElementById("a1");
document.getElementById("a2");
document.getElementById("a3");
document.getElementById("a4");
document.getElementById("submit");

function check() {

 if((q1.value == 6084) || (q1.value == 6,084)){
  document.write("<b>" + "1. Correct" + "</b>");
 } else if(q1.value.length == 0){
  document.write("<b>" + "1. Not Answered" + "</b>");
 }
 else {
   document.write("<b>" + "1. Incorrect" + "</b>");
  }
 
}

<!DOCTYPE html>
<html>
<head>
 <title>Quiz1</title>
</head>
<body>
<h1 align = "center">Math Test ✍</h1>
<h3 id = "q1">Question 1 : 78 * 78 = ?</h3>
<input id = "a1" type = "text" required>
<h3 id = "q2">Question 2 : (100 / 6) + 45 = ?</h3>
<input id = "a2" type = "text">
<h3 id = "q3">Question 3 : 87 + 123 = ?</h3>
<input id = "a3" type = "text">
<h3 id = "q4">Question 4 : 100 - 23 = ?</h3>
<input id = "a4" type = "text">
<br>
<br>
<button id = "submit" onclick = "check()">I'm Done!</button>



</body>
</html>

Answer 1

Bergi 对这个问题的评论找到了这个问题的根本原因，所以我将尝试帮助解决它。

首先，如果所有这些答案都是数字，您应该使用 number type inputs。这将阻止用户输入 non-numerical 个字符，这意味着您只需担心 6084 而不是 6,084，因此您可以继续删除 || (q1.value == 6,084) ].

其次，我没有看到您在任何地方分配变量 q1。您的意思是将 document.getElementById("a1") 的结果赋值给变量 q1 吗？如果你这样做了，那么你需要通过写 const q1 = document.getElementById("a1") 来分配它。如果仍然不起作用，请将 console.log(q1) 放在 check 函数的第一行，看看您正在使用的是什么。

或者，如果您想保持 ID 和变量名称相同。使用 const a1 = document.getElementById("a1") 然后将 check 函数中对 q1 的每个引用更改为 a1.

Answer 2

试试这个代码

您需要检查您从表单提供的数据的有效性，并计算用户正确给出了多少答案

function check() {

    var a1 = document.getElementById("a1").value;
    var a2 = document.getElementById("a2").value;
    var a3 = document.getElementById("a3").value;
    var a4 = document.getElementById("a4").value;

    if (isNaN(a1) || a1 == "") {
        alert("Please answer question 1 or enter a number value");
    } else if (isNaN(a2) || a2 == "") {
        alert("Please answer  question 2 or enter a number value");
    } else if (isNaN(a3) || a3 == "") {
        alert("Please answer question 3 or enter a number value");
    } else if (isNaN(a4) || a4 == "") {
        alert("Please answer question 4 or enter a number value");
    } else {
        let count = 0;
        if (a1 == 6084) {
            count++;
        }
        if (a2 == 61.66) {
            count++;
        }
        if (a3 == 210) {
            count++;
        }
        if (a4 == 77) {
            count++;
        }

        document.write("<h2>You have " + count + " correct answer out of 4 questions</h2>")
    }

}

<!DOCTYPE html>
<html>
<head>
 <title>Quiz1</title>
</head>
<body>
<h1 align = "center">Math Test ✍</h1>
<h3 id = "q1">Question 1 : 78 * 78 = ?</h3>
<input id = "a1" type = "text" required>
<h3 id = "q2">Question 2 : (100 / 6) + 45 = ?</h3>
<input id = "a2" type = "text">
<h3 id = "q3">Question 3 : 87 + 123 = ?</h3>
<input id = "a3" type = "text">
<h3 id = "q4">Question 4 : 100 - 23 = ?</h3>
<input id = "a4" type = "text">
<br>
<br>
<button id = "submit" onclick = "check()">I'm Done!</button>



</body>
</html>

为什么我为不同的条件放了不同的 if 语句却只输出一个？

Why is only one if statement output when I have put different ones for different conditions?

html

javascript

if-statement

function

submit-button