如何实现输入框数值实时汇总并动态展示结果？

本文共计853个文字，预计阅读时间需要4分钟。

原文：

在 Web 表单开发中，常见的需求是：当用户在多个 <input> 中输入数字时，页面自动实时计算总和并显示在指定位置。但初学者常陷入一个典型陷阱——在事件监听器内反复累加（如 tot += ...），导致每次输入都基于上一次的累计值继续叠加，形成类似 1→3→6→10... 的错误算术增长。

根本原因在于原始代码中：

• 全局变量 tot 持久存在，未重置；
• 每次触发 input 事件时，都对所有字段执行 +=，而非重新计算当前全部有效值之和；
• parseInt("") 返回 NaN，参与运算后会使整个结果变为 NaN；
• 使用了 <input> 自闭合写法但未遵循 HTML5 规范（虽浏览器兼容，但语义不严谨）；
• 为每个输入框单独绑定事件，性能冗余且逻辑耦合度高。

✅ 正确解法采用事件委托 + 函数式编程思想：

1. 统一监听父容器：将 input 事件绑定到包裹所有分数输入框的容器（如 #scoreContainer），利用事件冒泡机制响应所有子输入框变化；
2. 每次重新计算总和：不再维护累加状态，而是每次事件触发时，遍历所有 .score 字段，安全转换为数字，并用 reduce() 求和；
3. 健壮类型转换：使用一元加号 +field.value 转换，配合 isNaN() 过滤无效值（空字符串、非数字字符等），默认视作 0；
4. 语义化 HTML：使用 <input type="number"> 明确输入类型，提升可访问性与移动端体验；结果字段设为 readonly 防止误编辑。