计算器多变量乘法返回NaN结果问题排查求助

问题背景 #

正在开发一款支持答案猜测功能的计算器，但所有乘法运算均返回NaN，无法定位问题原因。最初编写的CalculateProduct函数存在未获取输入值就执行计算、变量命名不统一（混用number1与Getal1）、DOM元素引用错误等问题，调整后的BerekenProduct函数仍未解决问题。

现存代码问题分析 #

• DOM元素操作错误：尝试获取不存在的product元素，同时直接使用uitkomst、eigenberekening变量但未通过getElementById获取对应DOM节点
• 输入值转换风险：使用parseInt转换输入值时，若输入为空或非数字会返回NaN，直接相乘会导致最终结果为NaN
• 变量与DOM ID不匹配：旧函数中混用不同命名的变量，导致无法正确获取输入值
• 逻辑顺序错误：旧函数中先计算product再获取输入值，此时变量未定义，转换后直接得到NaN

修复后的完整代码 #

HTML部分 #

<!doctype html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS Rekenmachine</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>Js Rekenmachine</h1>
    Voer een getal in:        <input type="number" id="Getal1">
    <br>
    Voer een tweede getal in: <input type="number" id="Getal2">
    <br>
    Zelf berekende uitkomst:  <input type="number" id="Getal3">
    <br>
    <p id="uitkomst">De uitkomst is:</p>
    <span id="eigenberekening">Het door jou berekende antwoord is:</span>
    <br>
    <button type="button" class="btn btn-success btn-lg" onclick="BerekenSom()">Bereken som</button>  
    <button type="button" class="btn btn-success btn-lg" onclick="BerekenProduct()">Bereken Product</button>  

    <script src="./app.js"></script>   
</body>
</html>

JavaScript部分（app.js） #

function BerekenProduct() { 
    // 获取输入值并转为数字，空输入或非数字默认设为0
    const Getal1 = parseInt(document.getElementById("Getal1").value) || 0;
    const Getal2 = parseInt(document.getElementById("Getal2").value) || 0;
    const Getal3 = parseInt(document.getElementById("Getal3").value) || 0;

    const product = Getal1 * Getal2; 

    // 明确获取需要操作的DOM节点
    const uitkomstElement = document.getElementById("uitkomst");
    const eigenberekeningElement = document.getElementById("eigenberekening");

    uitkomstElement.innerHTML = `Het product van ${Getal1} * ${Getal2} = ${product}`;

    // 合并判断逻辑，减少冗余
    if (Getal3 === product) {
        eigenberekeningElement.innerHTML = "Het door jou berekende antwoord is goed";
        eigenberekeningElement.style.color = "green";
    } else {
        eigenberekeningElement.innerHTML = "Het door jou berekende antwoord is fout";
        eigenberekeningElement.style.color = "red";
    }
}

关键修复点 #

• 所有DOM操作均通过getElementById明确获取节点，避免使用未定义变量
• 给parseInt添加|| 0兜底，确保空输入或非数字输入转为0，防止出现NaN
• 统一变量命名，保持与HTML中元素ID一致，避免命名混淆
• 合并重复的判断逻辑，精简代码
• 移除原代码中无效的document.getElementById("product")语句

内容的提问来源于stack exchange，提问作者Cloudiskye