把变量当作数字相加不起作用。我想找出我漏掉的地方，而不仅仅是答案是什么

前端开发 2026-07-10

我卡在这里。我正在尝试把两个字段相加。如果把“+”改成用于乘法的“*”，变量会被当作数字来看待并相乘，但按原样的话，它们会被当作字符串，生成一个新的字符串"string1""string2"。我试着强制使用Number() 指令，但不起作用。在我的代码里，有一个“subtotal”和“subtotal2”用来演示相加与乘法之间的区别。下面是我的代码：

<html>
<head>
    <title>untitled</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>UNLOADED</td>
                <td><input type="checkbox" id="unloadedcheck"></td>
                <td><input type="number" id="unloadedrate" style="text-align: right;" size="7" value="3"></td>
                <td><input type="number" id="unloadedmiles" style="text-align: right;" size="10"></td>
                <td><input type="number" id="unloadedtotal" style="text-align: right;" size="7"></td>
            </tr>
            <tr>
                <td>LOCK</td>
                <td><input type="checkbox" id="lockcheck" style="text-align: right;" size="7"></td>
                <td><input type="number" id="lockfee" style="text-align: right;" size="7" value="65"></td>
                <td></td>
                <td><input type="number" id="locktotal" style="text-align: right;"
                    size="7"></td>
            </tr>
            <tr>
                <td>SUBTOTAL (add)</td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="number" id="subtotal" style="text-align: right;" size="7"></td>
            </tr>
            <tr>
                <td>SUBTOTAL (multiple)</td>
                <td></td>
                <td></td>
                <td></td>
                <td><input type="number" id="subtotal2" style="text-align: right;" size="7"></td>
            </tr>
        </table>
    </form>
    <script>
        function calculateSum() {
            if (document.getElementById("unloadedcheck").checked) {
                document.getElementById("unloadedtotal").value = (document.getElementById("unloadedrate").value) * (document.getElementById("unloadedmiles").value);
            }
            else {
                document.getElementById("unloadedtotal").value = 0;
            }
            //let varunloadedtotal = document.getElementById("unloadedtotal").value;
            if (document.getElementById("lockcheck").checked) {
                document.getElementById("locktotal").value = (document.getElementById("lockfee").value);
            }
            else {
                document.getElementById("locktotal").value = 0;
            }
            //let varlocktotal = document.getElementById("locktotal").value;
            document.getElementById("subtotal").value = document.getElementById("unloadedtotal").value + document.getElementById("locktotal").value;
            document.getElementById("subtotal2").value = document.getElementById("unloadedtotal").value * document.getElementById("locktotal").value;
        }
    </script>
    <button onclick="calculateSum()">CALCULATE</button></td>
</body>
</html>

解决方案

原因在于JavaScript如何处理类型，* 能工作而 + 不能。.value 在HTML输入框上总是返回字符串，即使输入类型是number。* 运算符在JavaScript中只能表示一件事（乘法），因此它会自动把两边的值转换为数字供你使用。但 + 被重载以同时执行加法和字符串拼接，因此当JavaScript看到两个字符串时，它会把它们拼接起来，而不是相加。

解决办法是使用 Number() 或 parseFloat() 来显式地将值转换，但需要专门把 .value 包起来：Number(document.getElementById("unloadedtotal").value)

小计这一行应当是这样的：

document.getElementById("subtotal").value = 
    Number(document.getElementById("unloadedtotal").value) + 
    Number(document.getElementById("locktotal").value);

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。