通过事件监听器将元素ID赋值给变量时出现undefined问题求助

我有如下三个按钮的HTML结构：

<div id="allbuttons">
            <button id="first">first</button>
            <button id="second">second</button>
            <button id="third">third</button>
</div>

我希望点击按钮时，把对应按钮的ID赋值给JavaScript变量newValue，方便后续使用。写了如下代码：

let newValue
const buttons = document.querySelectorAll('button')
buttons.forEach((button) => {button.addEventListener('click', function() {newValue = button.id} )}) 

console.log(newValue)

执行后console.log(newValue)返回undefined，但在事件监听器内部打印button.id能正常显示对应ID，想问问题出在哪？

核心问题：代码执行顺序不对 #

你的console.log(newValue)是页面加载时就同步执行的，这时候你还没点击任何按钮，newValue只被声明了但没赋值，所以输出undefined。

而按钮点击的回调函数是异步触发的——只有你点击按钮时，这段代码才会跑，把ID赋值给newValue。但这时候之前的console.log早就执行完了，不会因为newValue后来变了再重新输出。

解决办法 #

如果要看到newValue的正确值，得等它被赋值后再打印，把console.log挪到回调里就行：

let newValue
const buttons = document.querySelectorAll('button')
buttons.forEach((button) => {
  button.addEventListener('click', function() {
    newValue = button.id
    console.log(newValue) // 点击后才执行，能拿到正确ID
  })
})

要是后续有逻辑要用到newValue，得保证那些逻辑是在点击之后才触发的，比如把逻辑封装成函数，在回调里调用：

let newValue
const buttons = document.querySelectorAll('button')

// 封装后续要用newValue的逻辑
function handleNewValue() {
  console.log('用newValue做事情:', newValue)
  // 这里写具体业务逻辑
}

buttons.forEach((button) => {
  button.addEventListener('click', function() {
    newValue = button.id
    handleNewValue() // 点击后触发后续逻辑
  })
})

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