javascript - if语句javascript中的div

Question

由于某些原因，程序运行时网页中没有显示div标签。我测试了所有其他组件，发现问题是 div 标签值的设置在 if 语句中。唯一的问题是我不知道如何解决这个问题，但仍然让程序按照我想要的方式运行。

<div id="answerDisplay"></div>
<div id="correctOrNot"></div>

<script>
var div
var div2
var rightAnswer
var problemNum =Math.floor((Math.random() * 3) + 1);
if (problemNum == 1){
rightAnswer = 14;
div = document.getElementById("answerDisplay");
div.textContent = "4 + 2 * (10 - 3 * 2) / 4 + 8 = ?";


}
else if (problemNum == 2){
rightAnswer = 8;
    div = document.getElementById("answerDisplay");
div.textContent = "(6 - 3) * 2 + (3^2 - 5) / 2 = ?";

}
else if (problemNum == 3){
rightAnswer = 6;
    div = document.getElementById("answerDisplay");
div.textContent = "5 - 3 + 4^2 / (8 - 4 / 2) = ?";

}
else if (problemNum == 4){
rightAnswer = 3;
    div = document.getElementById("answerDisplay");
div.textContent = "5^2 - (6 * 2) * 2 * (5 - 2) = ?";

}

function checkRightAnswer (){
var answer = document.getElementById('Input').value
if (problemNum == 1 && answer == 14){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 2 && answer == 8){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 3 && answer == 6){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else if (problemNum == 4 && answer == 3){
div2 = document.getElementById("correctOrNot");
div2.textContent = "Correct";
problemNum =Math.floor((Math.random() * 3) + 1);
}
else {
div2 = document.getElementById("correctOrNot");
div2.textContent = "Incorrect, try again";

}
}



</script>

Answer 1

您的代码似乎工作正常。我没有看到您提供的代码片段中包含输入容器。也许你需要确保那里的 id 是正确的？我稍微清理了一下代码:

var div, div2, rightAnswer, problemNum = Math.floor((Math.random() * 3) + 1);
if (problemNum === 1) {
    rightAnswer = 14;
    div = document.getElementById("answerDisplay");
    div.textContent = "4 + 2 * (10 - 3 * 2) / 4 + 8 = ?";
} else if (problemNum === 2) {
    rightAnswer = 8;
    div = document.getElementById("answerDisplay");
    div.textContent = "(6 - 3) * 2 + (3^2 - 5) / 2 = ?";
} else if (problemNum === 3) {
    rightAnswer = 6;
    div = document.getElementById("answerDisplay");
    div.textContent = "5 - 3 + 4^2 / (8 - 4 / 2) = ?";
} else if (problemNum === 4) {
    rightAnswer = 3;
    div = document.getElementById("answerDisplay");
    div.textContent = "5^2 - (6 * 2) * 2 * (5 - 2) = ?";
}

function checkRightAnswer() {
    var answer = document.getElementById('Input').value;
    if (problemNum === 1 && answer === 14) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 2 && answer === 8) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 3 && answer === 6) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else if (problemNum === 4 && answer === 3) {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Correct";
        problemNum = Math.floor((Math.random() * 3) + 1);
    } else {
        div2 = document.getElementById("correctOrNot");
        div2.textContent = "Incorrect, try again";
    }
}

<div id="answerDisplay"></div>
<div id="correctOrNot"></div>
<input type="text" id="Input" />