为什么绑定input事件的箭头函数返回值为undefined且全局赋值不生效？

问题根因 #

你遇到的两个现象本质都是事件回调的异步执行逻辑和addEventListener的API特性导致的：

1. 为什么billInput的返回值拿不到？
   addEventListener方法本身的返回值就是undefined，你写的billInput是事件触发时才会执行的回调函数，它的返回值会直接被浏览器事件系统丢弃，不会传递给外部的totalBill变量，所以你打印totalBill必然是undefined。
2. 为什么全局billAmount赋值看起来没生效？
   你标记为3的console.log(billAmount)是页面初始化时同步执行的，这时候你还没有在输入框输入内容，billInput回调根本没有被触发，billAmount还是初始赋值的0，不是赋值失效。等你实际在输入框输入内容触发input事件后，billAmount就会被正常更新，此时你再在控制台打印这个变量就能拿到最新值。

代码优化建议 #

• parseInt建议补全第二个参数指定进制，避免异常解析：parseInt(event.target.value, 10)
• 注意ID拼写错误：你代码里写的getElementById("total-poeple")，poeple是拼写错误，正确应为people
• 如果你需要用输入的值做后续计算，把计算逻辑直接写到billInput回调内即可，输入触发时会自动执行。如果你确实需要在其他逻辑里用这个值，确保调用时机是在输入事件触发之后，不要在页面初始化阶段就读取。

修正后的参考代码 #

let billAmount = 0;

const billInput = (event) => {
  const getValue = parseInt(event.target.value, 10);
  // 修正ID拼写错误
  const totalPeopleElement = document.getElementById("total-people");
  totalPeopleElement.innerText = getValue;
  billAmount = getValue;
  // 所有需要用到输入值的逻辑可以直接在这里调用
  calculateTotal();
};

document.getElementById("bill-input").addEventListener("input", billInput);

function calculateTotal() {
  // 在这里写你的后续计算逻辑，此时billAmount已经是最新的输入值
  console.log('最新账单金额：', billAmount);
}

内容的提问来源于stack exchange，提问作者Md Pervej Hossain