JavaScript新手编写简易计算器无法获取输入值 求错误排查与修正

你的代码存在以下几处问题： #

• 页面加载顺序错误：<head> 里的JS代码执行时，<body> 里的输入框、结果标签等DOM元素还没渲染，document.getElementById 只能拿到null，转换数值后会得到NaN
• 取值逻辑错误：你直接对DOM元素执行parseInt，没有取输入框的value属性，永远拿不到用户输入的数值
• 取值时机错误：你在页面加载时就读取了x、y的数值，此时输入框是空的，后续用户输入内容后变量不会自动更新，应该在点击计算按钮触发函数时再读取最新的输入值
• 结果没有更新到页面：计算得到result后没有手动把值写入结果标签，页面不会自动显示计算结果
• 缺少减、乘、除对应的处理函数

修正后的完整代码如下： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
    <fieldset>
        <label for="first">First Number</label><br>
        <input type="number" id="x"><br>
        <label for="second">Second Number</label><br>
        <input type="number" id="y"><br>
        <input type="button" value="+" onclick="add();">
        <input type="button" value="-" onclick="substract();">
        <input type="button" value="*" onclick="multiplier();">
        <input type="button" value="/" onclick="division();"><br>
        <label id="result"></label><br>
    </fieldset>

    <script>
        // 计算函数统一写在DOM加载完成后，保证能正常获取元素
        function add(){
            // 触发计算时再读取最新的输入值
            const x = parseInt(document.getElementById("x").value);
            const y = parseInt(document.getElementById("y").value);
            const result = x + y;
            // 把结果写入页面标签展示
            document.getElementById("result").innerHTML = result;
        }

        function substract(){
            const x = parseInt(document.getElementById("x").value);
            const y = parseInt(document.getElementById("y").value);
            const result = x - y;
            document.getElementById("result").innerHTML = result;
        }

        function multiplier(){
            const x = parseInt(document.getElementById("x").value);
            const y = parseInt(document.getElementById("y").value);
            const result = x * y;
            document.getElementById("result").innerHTML = result;
        }

        function division(){
            const x = parseInt(document.getElementById("x").value);
            const y = parseInt(document.getElementById("y").value);
            // 简单处理除数为0的异常场景
            const result = y === 0 ? '除数不能为0' : x / y;
            document.getElementById("result").innerHTML = result;
        }
    </script>
</body>
</html>

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