如何将按钮文本存储到全局变量？解决函数返回undefined问题

你的判断完全正确：choice()返回undefined是因为主函数本身没有任何return语句，而事件监听回调的返回值根本不会被外层函数捕获——回调函数是用户点击按钮时才会执行，和choice()的执行（页面加载时就跑完了）完全是两个时间点，两者没有同步的返回关系。给forEach或事件回调命名也解决不了这个问题，因为核心矛盾是异步事件的结果无法同步获取。

另外你原代码里document.querySelectorAll('.container')选中的是容器div，不是按钮，得改成.container button才能正确获取三个按钮元素。

下面提供几种符合你需求的实现方式：

方案1：全局变量存储（最直接） #

直接在全局作用域声明变量，点击按钮时给它赋值，后续任何地方都能访问：

// 全局作用域声明变量
let playerChoice;

function setupChoiceListener() {
  document.querySelectorAll('.container button').forEach(button => {
    button.addEventListener('click', event => {
      // 点击时给全局变量赋值
      playerChoice = event.target.textContent;
      console.log('当前选择:', playerChoice);
    });
  });
}

// 初始化监听
setupChoiceListener();

// 后续需要使用playerChoice的地方直接调用即可
// 比如在其他函数里：
function checkChoice() {
  if (playerChoice) {
    console.log('已选择:', playerChoice);
  } else {
    console.log('还没做出选择');
  }
}

<div class="container">
  <button class="rock">rock</button>
  <button class="paper">paper</button>
  <button class="scissors">scissors</button>
</div>

方案2：使用回调函数（更优雅，避免全局变量） #

把需要处理选择结果的逻辑封装成回调函数，点击时直接执行回调，无需全局变量：

function setupChoiceListener(onChoiceMade) {
  document.querySelectorAll('.container button').forEach(button => {
    button.addEventListener('click', event => {
      const choice = event.target.textContent;
      // 调用传入的回调，把结果传进去
      onChoiceMade(choice);
    });
  });
}

// 初始化时传入处理逻辑
setupChoiceListener(choice => {
  console.log('你选了:', choice);
  // 这里可以直接写后续要执行的代码，比如和电脑对战的逻辑
  playGame(choice);
});

function playGame(playerChoice) {
  // 模拟电脑选择
  const computerChoices = ['rock', 'paper', 'scissors'];
  const computerChoice = computerChoices[Math.floor(Math.random() * 3)];
  console.log(`电脑选了: ${computerChoice}`);
  // 后续判断胜负逻辑...
}

方案3：使用Promise（现代异步处理方式） #

如果需要用异步的方式获取选择结果（比如配合async/await），可以用Promise封装：

function waitForChoice() {
  return new Promise(resolve => {
    const buttons = document.querySelectorAll('.container button');
    buttons.forEach(button => {
      const handleClick = event => {
        const choice = event.target.textContent;
        resolve(choice);
        // 只需要一次选择的话，移除所有监听避免重复触发
        buttons.forEach(btn => btn.removeEventListener('click', handleClick));
      };
      button.addEventListener('click', handleClick);
    });
  });
}

// 使用async/await获取结果
async function startGame() {
  console.log('请做出选择...');
  const playerChoice = await waitForChoice();
  console.log('你选了:', playerChoice);
  // 后续逻辑...
}

startGame();

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