获取输入数字字段值时触发Cannot read properties of null (reading 'value')错误的技术咨询

嘿，我来帮你搞定这个计算器的问题！咱们一步步拆解你遇到的错误和隐藏的小问题：

错误核心原因：DOM加载顺序不对 #

你把<script src="myscripts.js"></script>放在了页面最开头，浏览器是从上到下解析页面的——当JS代码执行document.getElementById("fornum1")的时候，下面的<input id="fornum1">还没被渲染出来，这个方法返回的是null，自然就会报错“Cannot read properties of null (reading 'value')”。

还有两个隐藏问题需要修复 #

1. 变量不会更新：你一开始就把num1和num2的值存起来了，之后用户修改输入框的数字，这两个变量还是保留初始的0，计算结果永远不对。
2. 事件绑定错误：你的减法、乘法、除法按钮没绑定onclick事件，反而把事件绑在了只读的输入框上，点击按钮根本不会触发计算函数。

修复方案 #

步骤1：调整脚本加载位置 #

把<script>标签移到</body>标签的前面，确保DOM全部加载完成后再执行JS代码。

步骤2：在计算函数内获取最新输入值 #

每次点击计算按钮时，重新获取输入框的数值，并且要把字符串转成数字（因为input的value默认是字符串，直接相加会变成拼接，比如"1"+"2"会得到"12"而不是3）。

步骤3：修正事件绑定 #

把onclick事件绑定到对应的按钮上，而不是输入框。

完整修正代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #div1 {
            height: 300px;
            width: 500px;
            background-color: plum;
            margin: auto;
            padding: 5%;
        }
        body {
            font-family: Courier;
        }
        label {
            width: 300px;
            display: inline-block;
        }
        #div2 input {
            width: 120px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <p style="text-align: center;">FOUR BASIC OPERATIONS</p>
        <label for="number1">Enter the First number :</label>
        <input type="number" value="0" id="fornum1">
        <br><br>
        <label for="number2">Enter the Second number:</label>
        <input type="number" value="0" id="fornum2">
        <br><br><br><br>
        <div align="center" id="div2">
            <button type="button" onclick="addition()">Add</button>
            <input type="text" id="sum" readonly>
            <button type="button" onclick="subtraction()">Subtraction</button>
            <input type="text" id="minus" readonly>
            <br><br><br>
            <button type="button" onclick="multiplication()">Multiplication</button>
            <input type="text" id="product" readonly>
            <button type="button" onclick="division()">Division</button>
            <input type="text" id="divs" readonly>
        </div>
    </div>
    <script src="myscripts.js"></script>
</body>
</html>

JavaScript代码（myscripts.js） #

function addition() {
    // 每次点击都获取最新值，并转成数字
    const num1 = Number(document.getElementById("fornum1").value);
    const num2 = Number(document.getElementById("fornum2").value);
    const answer = num1 + num2;
    document.getElementById("sum").value = answer;
}

function subtraction() {
    const num1 = Number(document.getElementById("fornum1").value);
    const num2 = Number(document.getElementById("fornum2").value);
    const answer = num1 - num2;
    document.getElementById("minus").value = answer;
}

function multiplication() {
    const num1 = Number(document.getElementById("fornum1").value);
    const num2 = Number(document.getElementById("fornum2").value);
    const answer = num1 * num2;
    document.getElementById("product").value = answer;
}

function division() {
    const num1 = Number(document.getElementById("fornum1").value);
    const num2 = Number(document.getElementById("fornum2").value);
    // 加个除数不为0的判断，避免错误
    const answer = num2 !== 0 ? num1 / num2 : "Cannot divide by 0";
    document.getElementById("divs").value = answer;
}

额外优化说明 #

我在除法函数里加了除数不为0的判断，避免出现无限大或者NaN的异常结果，让计算器更健壮。

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