无法获取按钮返回值且console输出undefined的原因及解决方案

为什么console.log(getPlayerChoice())返回空值（或undefined）？ #

你的代码核心问题在于点击事件是异步触发的：getPlayerChoice函数执行时，只是给按钮绑定了点击事件，随即就返回了初始值something（你初始赋值为空字符串）。这时候用户还没点击按钮，自然拿不到实际选择的值；等用户真的点击按钮时，函数早就执行完毕，返回值已经固定了。

事件监听器应该放在函数外部吗？ #

是的，必须放在外部。把监听器封装在getPlayerChoice内部，每次调用函数都会给所有按钮重复绑定点击事件，既冗余又可能引发重复触发的问题。正确做法是页面加载完成后，一次性给按钮绑定事件，无需重复执行绑定逻辑。

如何在函数外部获取按钮的值？ #

这里提供几种实用方案：

方案1：用回调函数处理选择 #

定义一个专门处理用户选择的函数，点击按钮时触发它：

const buttons = document.querySelectorAll('.rpsButton');

// 处理用户选择的逻辑
function handlePlayerChoice(choice) {
  console.log('用户选择了：', choice);
  // 在这里写后续业务逻辑，比如和电脑对战
}

// 一次性绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', e => {
    const userChoice = e.target.value;
    handlePlayerChoice(userChoice);
  });
});

方案2：用Promise等待用户选择 #

如果你的逻辑需要等待用户做出选择后再继续执行，可以用Promise封装：

const buttons = document.querySelectorAll('.rpsButton');

function getPlayerChoice() {
  return new Promise(resolve => {
    // 点击后触发resolve，并移除事件避免重复触发
    function handleClick(e) {
      const choice = e.target.value;
      buttons.forEach(btn => btn.removeEventListener('click', handleClick));
      resolve(choice);
    }
    buttons.forEach(button => button.addEventListener('click', handleClick));
  });
}

// 使用方式
getPlayerChoice().then(choice => {
  console.log('用户选择了：', choice);
  // 后续逻辑写在这里
});

方案3：全局变量存储（不推荐，仅用于快速测试） #

如果只是临时测试，可以用全局变量存值，但大型项目不建议这么做，容易引发变量污染：

let playerChoice;
const buttons = document.querySelectorAll('.rpsButton');

buttons.forEach(button => {
  button.addEventListener('click', e => {
    playerChoice = e.target.value;
    console.log('用户选择了：', playerChoice);
  });
});

// 注意：必须在用户点击后再访问playerChoice，否则仍是初始值

总结 #

• 初始问题的本质是异步事件时机不匹配，函数在点击触发前就返回了未更新的初始值。
• 事件监听器应放在函数外部，仅绑定一次。
• 获取按钮值的核心是在点击事件触发的瞬间处理值，而非提前返回未确定的结果。

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