Javascript数字游戏不显示输出答案

【问题标题】：Javascript number game not showing outputJavascript数字游戏不显示输出
【发布时间】：2021-09-25 02:05:38
【问题描述】：

我一直在尝试用 Javascript 制作游戏，其中浏览器通过单击按钮生成 2 个随机数和一个操作数，用户必须在输入区域中输入显示计算的答案。如果答案是正确的，浏览器会显示一个提示它是正确的。一切正常，数字和操作数正在显示，用户可以输入他的答案，但我没有从浏览器收到任何警报。

这是 HTML 和 Javascript 代码（我还没有应用任何样式）。

function displayOperation() {
    let num1 = Math.floor(Math.random() * 100) + 1;
    let num2 = Math.floor(Math.random() * 100) + 1;
    let operandArr = ["+", "-", "*"];
    let randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
    document.getElementById("number_one").innerHTML = num1;
    document.getElementById("number_two").innerHTML = num2;
    document.getElementById("operand_type").innerHTML = randomOperand;
    switch (randomOperand) {
        case "+":
            add();
            break;
        case "-":
            subtract();
            break;
        case "*":
            multiply();
            break;
    }

    function add() {
        let res = num1 + num2;
        let userAnswer = document.getElementById("text_Area").value;
        document.getElementById("calculate").addEventListener("click", function () {
            if (userAnswer === res) {
                alert("correct!");
                window.location.reload();
            }
        });
    }

    function subtract() {
        let res = num1 - num2;
        let userAnswer = document.getElementById("text_Area").value;
        document.getElementById("calculate").addEventListener("click", function () {
            if (userAnswer === res) {
                alert("correct!");
                window.location.reload();
            }
        });
    }

    function multiply() {
        let res = num1 * num2;
        let userAnswer = document.getElementById("text_Area").value;
        document.getElementById("calculate").addEventListener("click", function () {
            if (userAnswer === res) {
                alert("correct!");
                window.location.reload();
            }
        });
    }
}

document.getElementById("reload").addEventListener("click", function () {
    displayOperation();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number Game</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>

<div id="number_one">

</div>
<div id="operand_type">

</div>
<div id="number_two">

</div>
<div id="text_Area">
    <label for="answer">
        <input type="number" id="answer">
    </label>
</div>
<div class="buttons">
    <button type="button" id="calculate">Calculate</button>
    <button type="button" id="reload">Load</button>
</div>
<div id="result">

</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>

我们将不胜感激。

谢谢！

【问题讨论】：

标签： javascript html css dom event-listener

【解决方案1】：

您的代码中有多个问题。答案的输入字段的 ID 为 answer 而不是 text_Area。您在错误的范围内定义了加法、乘法和减法的函数。并且您使用=== 进行检查，但.value 返回一个字符串，而num1 + num2（例如）返回一个整数，因此检查总是错误的。如果您对我对您的代码所做的更改有任何疑问，我很乐意为您提供帮助。

var operandArr = ["+", "-", "*"];
var num1;
var num2;
var randomOperand;

function displayOperation() {
    num1 = Math.floor(Math.random() * 100) + 1;
    num2 = Math.floor(Math.random() * 100) + 1;
    randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
    document.getElementById("number_one").innerHTML = num1;
    document.getElementById("number_two").innerHTML = num2;
    document.getElementById("operand_type").innerHTML = randomOperand;
}

document.getElementById("reload").addEventListener("click", function () {
    displayOperation();
});

function calculate() {
  switch (randomOperand) {
    case "+":
        add()
        break;
    case "-":
        subtract()
        break;
    case "*":
        multiply()
        break;
  }
}

function add() {
    let res = num1 + num2;
    let userAnswer = document.getElementById("answer").value;
    if (parseInt(userAnswer) === res) {
        alert("correct!");
        window.location.reload();
    }
}

function subtract() {
    let res = num1 - num2;
    let userAnswer = document.getElementById("answer").value;
    if (parseInt(userAnswer) === res) {
        alert("correct!");
        window.location.reload();
    }
}

function multiply() {
    let res = num1 * num2;
    let userAnswer = document.getElementById("answer").value;
    if (parseInt(userAnswer) === res) {
        alert("correct!");
        window.location.reload();
    }
}

document.getElementById("calculate").addEventListener("click", function () {
    calculate();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number Game</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>

<div id="number_one">

</div>
<div id="operand_type">

</div>
<div id="number_two">

</div>
<div id="text_Area">
    <label for="answer">
        <input type="number" id="answer">
    </label>
</div>
<div class="buttons">
    <button type="button" id="calculate">Calculate</button>
    <button type="button" id="reload">Load</button>
</div>
<div id="result">

</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>

【讨论】：

@AdwaitKulkarni。很高兴我能帮助你。您介意为您的问题选择我的答案吗？
当然！这看起来更整洁，我也明白我哪里出错了！再次感谢！
另外，你能告诉我我的代码的逻辑部分是否正确吗？我开始自己开发一些项目，希望得到一些反馈！
你已经很接近了。你的逻辑没问题，但你必须注意范围。函数中定义的变量仅在其主体中可用。这就是为什么我将它们提取到“根范围”。您还需要小心addEventListener，因为它们会叠加。但总的来说是一个非常好的方法。干得好！

【解决方案2】：

您可以将计算提取到另一个函数中并使用 Function() 进行所需的计算

function displayOperation() {
    let num1 = Math.floor(Math.random() * 100) + 1;
    let num2 = Math.floor(Math.random() * 100) + 1;
    let operandArr = ["+", "-", "*"];
    let randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
    document.getElementById("number_one").innerHTML = num1;
    document.getElementById("number_two").innerHTML = num2;
    document.getElementById("operand_type").innerHTML = randomOperand;
}

document.getElementById("calculate").addEventListener("click", function () {
  let num1 = document.getElementById("number_one").innerHTML;
    let num2 = document.getElementById("number_two").innerHTML;
    let randomOperand = document.getElementById("operand_type").innerHTML;
let userAnswer = document.getElementById("answer").value;
        let res = Function(`'use strict'; return (${num1 + randomOperand +num2})`)() ;
        console.log(res)
            if (parseInt(userAnswer) === res) {
                alert("correct!");
                window.location.reload();
            } else {
            console.log('huuu')
            }
        });
document.getElementById("reload").addEventListener("click", displayOperation);

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number Game</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>

<div id="number_one">

</div>
<div id="operand_type">

</div>
<div id="number_two">

</div>
<div id="text_Area">
    <label for="answer">
        <input type="number" id="answer">
    </label>
</div>
<div class="buttons">
    <button type="button" id="calculate">Calculate</button>
    <button type="button" id="reload">Load</button>
</div>
<div id="result">

</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>

【讨论】：

谢谢你！我对 JavaScript 比较陌生，所以我对函数一无所知，但我一定会检查一下！