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

本文共计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 防止误编辑。

以下是推荐实现代码：

<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，是现代前端实时计算的推荐范式。