JS循环累加输入框值异常：结果为130000000000000000000000的原因与修复

我有24个类名为.fat-calc1至.fat-calc24的输入框，以及一个.fat-result的结果容器，想要实现输入框值的累加并展示结果，但输入fat-calc1为1、fat-calc2为3时，结果显示为130000000000000000000000而非预期的4。

相关代码 #

HTML代码

<div class='fat-calc-col'>
  <input type='number' name='fat-calc1' class='fat-calc fat-calc1'>
  <input type='number' name='fat-calc2' class='fat-calc fat-calc2'>
  <input type='number' name='fat-calc3' class='fat-calc fat-calc3'>
  ...
  <div class='calc-result fat-result'></div>
</div>

注：原HTML中存在小错误，部分输入框的name属性多了引号，已修正。

原JS代码

$(".fat-calc-col").children().on('input', function(e){

    var fat = [];
    let result = "";
    
    for (let x = 1; x <= 24; x++) {
        fat[x] = parseFloat($(".fat-calc" + x).val());
        fat[x] = fat[x] ? fat[x] : 0;
        result += fat[x];
    }

    $(".fat-result").text(result);
    
});

问题原因 #

• 核心错误：result初始化为空字符串""，JavaScript中字符串与数值使用+=时会执行字符串拼接而非数值加法。比如第一个数值1和空字符串拼接成"1"，第二个数值3拼接后变成"13"，剩余22个输入框默认值0依次拼接，最终得到"13"加22个0的结果。
• 额外冗余：数组fat属于不必要的中间变量，徒增代码复杂度。

修复方案 #

1. 将result初始值改为数值0，确保+=执行数值加法。
2. 优化选择逻辑：直接通过通用类.fat-calc选中所有目标输入框，遍历计算更简洁，避免类名编号出错。

修改后的JS代码

$(".fat-calc-col").on('input', '.fat-calc', function(e){
    let result = 0;
    // 遍历所有.fat-calc输入框
    $(".fat-calc").each(function() {
        // 解析值，空值或非数值则取0
        const value = parseFloat($(this).val()) || 0;
        result += value;
    });
    $(".fat-result").text(result);
});

额外优化说明 #

• 事件绑定更精准：直接给.fat-calc绑定input事件，而非给所有子元素绑定，减少不必要的事件触发。
• 避免依赖类名编号：如果后续输入框数量变化，无需修改循环条件，代码扩展性更强。

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