Question

我编写的代码存在一些简单的数学问题。当用户按下提交时，if语句将确定文本框是否为空或具有某些输入。我为用户放置了一个if语句，如果用户得到正确的问题，它将记录下来。写正确，如果为null，则将不会回答，依此类推。取而代之的是，无论文本框为空还是答案错误，它都会输出正确的信息。我知道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

尝试使用此代码

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

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>

Answer 2

Bergi对问题的评论是此问题的根本原因，因此我将竭尽全力帮助解决该问题。

首先，如果所有这些答案都将是数字，则应使用number type inputs。这样可以防止用户键入非数字字符，这意味着您只需要担心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")，然后将q1函数中对check的每个引用都更改为a1。

当我在不同条件下放置不同的if语句时，为什么只输出一个if语句？

2 个答案: