点击事件中用回调函数存按钮值到全局变量返回undefined求助

核心问题 #

你的代码返回undefined有两个关键原因：

1. 异步时序错误：getPlayerChoice函数添加完按钮点击监听后，立刻执行console.log(playerChoice)——这时候用户还没点击按钮，playerChoice保持初始的undefined状态。
2. 函数无返回值：getPlayerChoice没有任何返回语句，所以playerSelection = getPlayerChoice()必然得到undefined。

你第二个代码能正常打印点击值，是因为把console.log放在了点击事件的回调里（只有用户点击时才执行），但同样没解决将值传递给playerSelection的问题。

修复方案 #

按钮点击是异步触发的操作，不能用同步方式直接获取值，推荐两种处理方式：

方案1：用Promise封装点击事件 #

将getPlayerChoice改为返回Promise，用户点击时返回对应值：

function getPlayerChoice() {
  return new Promise((resolve) => {
    const playerButtons = document.querySelectorAll(".btn");
    // 点击后返回值并移除监听，避免重复触发
    function handleClick(e) {
      const choice = e.target.innerText;
      playerButtons.forEach(btn => btn.removeEventListener('click', handleClick));
      resolve(choice);
    }
    playerButtons.forEach(btn => btn.addEventListener('click', handleClick));
  });
}

// 用async/await处理异步逻辑
async function playRound() {
  const playerSelection = await getPlayerChoice();
  const computerSelection = getComputerChoice();
  // 这里编写胜负判断等后续逻辑
  console.log('玩家选择:', playerSelection, '电脑选择:', computerSelection);
}

// 启动游戏
playRound();

方案2：将逻辑整合到点击回调中 #

如果不想用Promise，直接把回合逻辑放到按钮点击事件里：

function getComputerChoice() {
  // 示例：随机返回石头/剪刀/布
  const choices = ['石头', '剪刀', '布'];
  return choices[Math.floor(Math.random() * choices.length)];
}

function initGame() {
  const playerButtons = document.querySelectorAll(".btn");
  playerButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      const playerSelection = this.innerText;
      const computerSelection = getComputerChoice();
      playRound(playerSelection, computerSelection);
    });
  });
}

function playRound(playerSelection, computerSelection) {
  console.log('玩家选择:', playerSelection, '电脑选择:', computerSelection);
  // 编写胜负判断逻辑
}

// 初始化游戏
initGame();

额外优化建议 #

• 避免使用全局变量playerChoice，通过函数参数或返回值传递数据，减少全局污染。
• 绑定点击事件时无需使用立即执行函数（IIFE），forEach或for...of的块级作用域会保证每个按钮的上下文独立。

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