如何在单个输入框触发输入事件时获取所有输入框的值？

嘿，你的思路已经走对路啦！给每个输入框绑定input事件是正确的做法，现在只需要完善updateAmount函数，让它在每次输入变更时遍历所有输入框来收集当前值，而不是只盯着触发事件的那个输入框。

这里是修改后的完整代码，直接就能用：

const init = () => {
  $amountField.forEach($field => {
    $field.addEventListener('input', updateAmount);
  });

  const updateAmount = () => {
    // 遍历所有输入框，把每个值转成数字（空值默认0，避免NaN搞砸总和）
    const allValues = $amountField.map(field => Number(field.value) || 0);
    // 用reduce快速计算总和
    const total = allValues.reduce((acc, curr) => acc + curr, 0);
    
    // 打印调试，你也可以把这些值渲染到页面上
    console.log('当前所有输入框的值:', allValues);
    console.log('实时计算的总和:', total);
    
    // 比如把总和显示到页面的某个元素里：
    // document.querySelector('.total-display').textContent = `总和：${total}`;
  };
  
  // 页面加载完先跑一次，显示初始的总和
  updateAmount();
};

// 别忘了调用初始化函数
init();

几个关键细节要注意： #

• 不用纠结e.target啦，直接遍历$amountField就能拿到所有输入框的最新值，不管是谁触发的事件。
• 用Number(field.value) || 0是为了处理输入框为空的情况——如果用户把输入框清空，不会让总和变成NaN，而是当成0计算。
• 初始化时调用updateAmount()，这样页面刚加载的时候，就能显示初始值的总和，不用等用户第一次输入才出现。

举个实际场景的例子：

• 初始输入框值是1、2、3，页面加载后控制台会输出当前所有输入框的值: [1,2,3]和实时计算的总和: 6
• 把第一个输入框改成5，立刻会输出当前所有输入框的值: [5,2,3]和实时计算的总和: 10

这样就完全实现了你要的效果：任意输入框变更时，实时获取所有值并更新总和～

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