为何input事件监听器替换输入值时无法正确计算总和？

核心问题 #

你的total变量采用累加单个输入值的方式计算总和，而非每次输入变化时重新计算所有输入框的总和，这导致替换原有数值时总和计算错误：

• 输入9+8+9时，total依次累加为9→17→26；
• 把8替换成9时，input事件触发，你将新的9再次加到total中，total变为26+9=35，不等于目标值27，因此不会弹出提示；
• 第一次输入9+9+9时，total累加为9→18→27，刚好命中条件，所以能正常触发提示。

修正方案 #

每次input事件触发时，遍历所有输入框重新计算总和，替代累加逻辑：

修改后的JavaScript代码 #

const element1 = document.querySelector('.element1')
let desiredTotal = 27

let allInputs = Array.from(element1.getElementsByTagName('input'))
allInputs.forEach((input)=>{
    input.style.border = '2px solid blue'
    input.addEventListener('keyup', (e)=>{
        // 直接判断按键是否为0-9数字，简化逻辑
        if(/^\d$/.test(e.key)){
            e.target.value = e.key
        }
    })
})

allInputs.forEach((input)=>{
    input.addEventListener('input', (e)=>{
        // 重新计算所有输入框的总和，空值或非数字按0处理
        const total = allInputs.reduce((sum, item) => {
            const val = parseFloat(item.value) || 0;
            return sum + val;
        }, 0);
        console.log(total)
        if(total === desiredTotal) alert('you won!')
    })
})

额外优化点 #

1. 简化keyup事件的判断逻辑，用正则/^\d$/直接检测按键是否为数字，比parseFloat更高效准确；
2. 去掉全局的total变量，改为每次计算时临时生成，避免全局变量污染；
3. 处理输入框为空或非数字的情况，用|| 0确保计算时不会出现NaN。

为什么放在keyup里能正常工作？ #

如果把计算逻辑移到keyup中，每次按键替换值后，你可以选择重新计算总和（而非累加），因此能得到正确的数值触发提示。但input事件是更适合监听输入变化的事件（比如粘贴、拖拽输入也能触发），所以修正input事件的计算逻辑才是更合理的方案。

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