本文详解如何使用现代 javascript（事件委托 + map/reduce）正确实现多个数字输入框的实时求和，避免累加错误、nan 异常及 html 语义问题。
本文详解如何使用现代 javascript（事件委托 + map/reduce）正确实现多个数字输入框的实时求和，避免累加错误、nan 异常及 html 语义问题。
在 Web 表单开发中，常见的需求是：当用户在多个 <input> 中输入数字时，页面自动实时计算总和并显示在指定位置。但初学者常陷入一个典型陷阱——在事件监听器内反复累加（如 tot += ...），导致每次输入都基于上一次的累计值继续叠加，形成类似 1→3→6→10... 的错误算术增长。
根本原因在于原始代码中：
- 全局变量 tot 持久存在，未重置；
- 每次触发 input 事件时，都对所有字段执行 +=，而非重新计算当前全部有效值之和；
- parseInt("") 返回 NaN，参与运算后会使整个结果变为 NaN；
- 使用了 <input> 自闭合写法但未遵循 HTML5 规范（虽浏览器兼容，但语义不严谨）；
- 为每个输入框单独绑定事件，性能冗余且逻辑耦合度高。
✅ 正确解法采用事件委托 + 函数式编程思想：
- 统一监听父容器：将 input 事件绑定到包裹所有分数输入框的容器（如 #scoreContainer），利用事件冒泡机制响应所有子输入框变化；
- 每次重新计算总和：不再维护累加状态，而是每次事件触发时，遍历所有 .score 字段，安全转换为数字，并用 reduce() 求和；
- 健壮类型转换：使用一元加号 +field.value 转换，配合 isNaN() 过滤无效值（空字符串、非数字字符等），默认视作 0；
- 语义化 HTML：使用 <input type="number"> 明确输入类型，提升可访问性与移动端体验；结果字段设为 readonly 防止误编辑。
以下是推荐实现代码：
<div id="scoreContainer"> <p><input type="number" class="score" id="myInputField12" /></p> <p><input type="number" class="score" id="myInputField13" /></p> <p><input type="text" class="result" id="total" readonly /></p> </div>
const scoreContainer = document.getElementById('scoreContainer');
const fields = scoreContainer.querySelectorAll('.score');
const totalField = document.getElementById('total');
scoreContainer.addEventListener('input', () => {
const sum = [...fields].map(field => {
const num = +field.value;
return isNaN(num) ? 0 : num;
}).reduce((acc, curr) => acc + curr, 0); // 初始值设为 0，确保空数组返回 0
totalField.value = sum;
});? 关键注意事项：
- ...fields 将 NodeList 转为数组，才能使用 map() 和 reduce()；
- reduce() 第二个参数（初始值）显式传入 0 是良好实践，避免首个元素为 undefined 或空字符串时出错；
- 若需保留小数精度（如金额），建议改用 parseFloat() 并结合 toFixed()，但注意其返回字符串类型；
- 如需支持负数或科学计数法，+value 已天然兼容；若需严格整数校验，可额外添加 Number.isInteger() 判断。
该方案简洁、高效、无副作用，完美解决“越输越大”的逻辑 bug，是现代前端实时计算的推荐范式。
