JavaScript多按钮点击时将按钮值存入变量返回undefined问题

代码里有两个核心逻辑错误，导致拿不到正确值：

• forEach 方法本身没有返回值，无论回调函数里return什么内容，forEach 的执行结果固定为undefined，直接把它的执行结果赋值给playerSelection，变量初始值就不对。
• 点击事件是异步触发的：JS运行时会先把页面加载阶段的所有同步代码执行完，包括写在最外层的console.log(playerSelection)，这时候用户还没点击任何按钮，根本没有产生选择值。就算后续触发点击，在事件回调里写的return e.target.textContent，是把值返回给浏览器的事件调度系统，不会自动赋值给外层声明的变量。

先声明可重新赋值的变量存储选择结果，在点击事件触发的回调内部给变量赋值，所有依赖选择结果的逻辑，都要放在赋值完成后执行：

// 用let声明可修改的选择变量，初始值设为null
let playerSelection = null;
const btnList = document.querySelectorAll('button');
const outputDom = document.querySelector('#output');

btnList.forEach(btn => {
  btn.addEventListener('click', e => {
    // 点击时把按钮文本赋值给外层变量
    playerSelection = e.target.textContent;
    // 后续所有需要用到选择值的逻辑，都放在这里执行
    console.log('当前玩家选择：', playerSelection);
    outputDom.textContent = `本局选择：${playerSelection}`;
  })
})

原有HTML结构不需要调整，可直接使用。

注意：不要在事件绑定的同步代码流中直接读取playerSelection做业务逻辑，这部分代码会在用户交互前就执行，拿到的永远是初始值。所有需要用到用户交互结果的逻辑，要么直接写在事件回调里，要么封装成函数在回调中调用。

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