开发石头剪刀布游戏：如何用单个事件监听器获取按钮点击文本

问题分析 #

你当前的代码存在两个核心问题：

• document.querySelector("button")仅会匹配页面中第一个<button>元素，因此无法获取另外两个按钮的文本内容。
• 直接调用getPlayerChoice()只会在页面加载时执行一次，并未绑定按钮的点击事件，无法响应用户的点击操作。

解决方案：事件委托 #

利用事件冒泡机制，给所有按钮的父元素绑定单个事件监听器，通过event.target获取触发点击的具体按钮，从而实现用一个监听器处理所有按钮的点击逻辑。

修改后的代码 #

JavaScript 代码

let optionsArray = ["rock", "paper", "scissors"];

const getComputerChoice = () => {
  let randomNumber = Math.floor(Math.random() * optionsArray.length);
  return optionsArray[randomNumber];
};

// 处理用户点击逻辑
const handlePlayerClick = (event) => {
  // 仅当点击对象是按钮时执行逻辑
  if (event.target.tagName === "BUTTON") {
    const playerChoice = event.target.textContent;
    console.log(`用户选择：${playerChoice}`);
    
    // 可在此处扩展游戏逻辑，比如对比电脑选择
    const computerChoice = getComputerChoice();
    console.log(`电脑选择：${computerChoice}`);
  }
};

// 给父元素绑定点击事件（这里用body作为父容器，也可给按钮单独加容器）
document.body.addEventListener("click", handlePlayerClick);

HTML 代码（可选优化：给按钮添加统一容器）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ROCK PAPER SCISSORS</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div class="choices-container">
      <button>rock</button>
      <button>paper</button>
      <button>scissors</button>
    </div>
    <script src="script.js" async defer></script>
  </body>
</html>

如果使用了上述带容器的HTML，只需将JS中的事件监听对象改为容器元素即可：

document.querySelector(".choices-container").addEventListener("click", handlePlayerClick);

关键说明 #

• 事件委托的优势：无需给每个按钮单独绑定监听器，一次绑定即可处理所有现有及后续新增的按钮点击事件。
• event.target：指向触发事件的具体DOM元素，通过判断tagName可确保仅在点击按钮时执行逻辑，避免误触发。

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