onChange事件计算总费用返回0 输入框取值异常问题如何解决

问题根因 #

你使用的valueAsNumber属性仅支持type="number"的输入框，你当前所有需要统计的输入框类型都是text，所以fee.valueAsNumber会返回NaN，if(NaN)的判断结果为假，不会执行累加逻辑，最终sum始终为0。

修复方案 #

方案一：仅修改JS代码（无需改动HTML） #

把数值转换逻辑改成用Number()转换输入框的value值，同时做好空值、非数字值的兼容即可，修改后代码如下：

function findTotal_'.$f['fid'].'() {
  const fees = document.querySelectorAll(".fee_'.$f['fid'].'");
  const total = document.querySelector("#total_fee_'.$f['fid'].'");
  let sum = 0;
  fees.forEach((fee) => {
    // 转换为数字，空值、非数字值统一按0处理
    const val = Number(fee.value.trim()) || 0;
    sum += val;
  });
  total.value = sum;
}

方案二：修改输入框类型为number（可选，使用体验更好） #

如果希望限制用户只能输入数字，可以把所有需要统计的输入框的type从text改成number，配合原有的valueAsNumber也能正常工作，同时浏览器会自带数字输入校验：

<input onchange="findTotal_'.$f['fid'].'()" type="number" class="small_input_box fee_'.$f['fid'].'" name="monthly_fee" size="5" value="1000">

额外优化建议 #

• 可以把onchange事件改成oninput，实现用户输入过程中实时计算总费用，不需要等输入框失焦才触发更新
• 如果需要保留小数计算，可以加toFixed(2)之类的处理，避免浮点精度问题

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