JS DOM计算异常：运费计算器总计显示NaN$问题排查

问题描述 #

我正在开发一个小型配送项目的运费计算页面，该页面可计算保险费与运费，但「总计」区域无法完成求和，仅输出NaN$。尝试了自身掌握的方法并查阅资料，仍无法修复该bug。请问错误出在哪里？为何无法完成求和？（无需关注页面设计）

页面代码 #

HTML代码 #

<!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">
      <link rel="stylesheet" href="./pricelalc.css">
      <script src="./pricecalc.js"></script>
      <title>Price calculator</title>
      <div class="main">
         <div class="specf">
            <div class="fields">
               enter dimensions(in cms):
               <input type="text" id="width" placeholder="width">
               <input type="text" id="height" placeholder="height">
               <input type="text" id="length" placeholder="length">
            </div>
            <div class="weipri">
               <div class="weight">
                  <label for="weight">Enter weight(in kgs):</label>
                  <input type="text" name="weight" id="weight" placeholder="weight" class="wandp">
               </div>
               <div class="weight">
                  <label for="price">Enter price(USD):</label>
                  <input type="text" name="price" id="price" placeholder="price(USD)" class="wandp">
               </div>
            </div>
            <button onclick="calculate()">Calculate</button>
         </div>
         <div class="summary">
            <div class="sum">
               weight:
               <p id="sumweight">0</p>
               kg
            </div>
            <div class="sum">
               dimensional weight:
               <p id="sumdimweight">0</p>
               kg
            </div>
            <div class="sum">
               <strong>
                  chargeable weight:
                  <p id="sumcharweight">0</p>
                  kg
               </strong>
            </div>
            <hr class="line">
            <br>
            <div class="sum">
               Insurance: 
               <p id="insurance">0</p>
               $
            </div>
            <div class="sum">
               transportation: 
               <p id="transportation">0</p>
               $
            </div>
            <div class="total">
               total: 
               <p id="sum">0</p>
               $
            </div>
         </div>
      </div>
   </head>
   <body>
   </body>
</html>

JavaScript代码 #

function calculate() {
    const weight = document.getElementById("weight").value;
    const width = document.getElementById("width").value;
    const height = document.getElementById("height").value;
    const length = document.getElementById("length").value;
    const price = document.getElementById("price").value;

    let sumweight = document.getElementById("sumweight");
    let sumdimweight = document.getElementById("sumdimweight");
    let sumcharwe = document.getElementById("sumcharweight");
    let transportation = document.getElementById("transportation");
    let insurance = document.getElementById("insurance");
    let total = document.getElementById("sum");
    sumweight.innerHTML = weight;
    sumdimweight.innerHTML = length * width * height / 6000;
    if (weight > length * width * height / 6000) {
        sumcharwe.innerHTML = weight;
        transportation.innerHTML = weight * 9;
    }
    if (weight < length * width * height / 6000) {
        sumcharwe.innerHTML = length * width * height / 6000;
        transportation.innerHTML = length * width * height / 6000 * 9;
    }
    insurance.innerHTML = price * 0.1;
    console.log(insurance);

    total.innerHTML = parseInt(insurance) + parseInt(transportation);

}

console.log(document.getElementById("sumcharweight"))

错误原因 #

• DOM元素与数值混淆：求和时直接对insurance和transportation这两个DOM元素调用parseInt()，而非它们的内容值。DOM对象无法被解析为数字，直接返回NaN。
• 输入值类型问题：从input获取的value是字符串，直接参与计算会触发隐式转换，若输入为空或非数字，会导致后续计算全变为NaN。
• 逻辑漏洞：未处理实际重量与体积重量相等的情况，此时transportation和chargeable weight不会被赋值，保持初始0值。

修复方案 #

修改后的JavaScript代码：

function calculate() {
    // 将输入值转为数字，空值/非数字默认设为0
    const weight = parseFloat(document.getElementById("weight").value) || 0;
    const width = parseFloat(document.getElementById("width").value) || 0;
    const height = parseFloat(document.getElementById("height").value) || 0;
    const length = parseFloat(document.getElementById("length").value) || 0;
    const price = parseFloat(document.getElementById("price").value) || 0;

    const sumweight = document.getElementById("sumweight");
    const sumdimweight = document.getElementById("sumdimweight");
    const sumcharwe = document.getElementById("sumcharweight");
    const transportationEl = document.getElementById("transportation");
    const insuranceEl = document.getElementById("insurance");
    const total = document.getElementById("sum");

    // 计算体积重量
    const dimWeight = length * width * height / 6000;
    sumweight.innerHTML = weight.toFixed(2);
    sumdimweight.innerHTML = dimWeight.toFixed(2);

    // 确定计费重量和运费，处理相等情况
    let chargeableWeight, transportationCost;
    if (weight >= dimWeight) {
        chargeableWeight = weight;
        transportationCost = weight * 9;
    } else {
        chargeableWeight = dimWeight;
        transportationCost = dimWeight * 9;
    }

    sumcharwe.innerHTML = chargeableWeight.toFixed(2);
    transportationEl.innerHTML = transportationCost.toFixed(2);
    
    // 计算保险费
    const insuranceCost = price * 0.1;
    insuranceEl.innerHTML = insuranceCost.toFixed(2);

    // 用计算好的数值求和，避免操作DOM元素
    total.innerHTML = (transportationCost + insuranceCost).toFixed(2);
}

修复说明 #

1. 输入值类型转换：使用parseFloat将输入字符串转为数字，空值或非数字默认设为0，避免NaN出现。
2. 分离计算与DOM操作：先完成所有数值计算，再更新DOM内容，求和时直接用计算好的变量，而非从DOM读取，更高效且避免错误。
3. 补全逻辑漏洞：合并重量判断条件，处理重量相等的情况，确保所有分支都有赋值。
4. 格式化输出：用toFixed(2)保留两位小数，符合货币显示的常规需求。

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