按钮click事件失效：剪刀石头布UI项目代码排查求助

核心问题 #

你的事件委托逻辑完全错误：

• 事件回调的参数是事件对象，不是点击的DOM元素，所以selection === startGame这类判断永远不会成立，导致所有分支都不执行，自然没有响应。
• 你在事件委托的回调里给按钮重复绑定点击事件，相当于第一次点击只是给按钮注册事件，第二次点击才会触发，这完全违背了事件委托的初衷。
• 缺少电脑随机选择的逻辑，无法给playRound提供computerSelection参数。

修正后的代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Project Rock Paper Scissors</title>
        <script src = "javascript.js" defer> </script>
    </head>
    <body>
        <div class="btn-group">
            <button id="startgame"> Start game </button>
            <button id="rock"> Rock </button>
            <button id="paper"> Paper </button>
            <button id="scissor"> Scissor </button>
        </div>
    </body>
</html>

JavaScript

const btnGroup = document.querySelector(".btn-group");

// 生成电脑随机选择的函数
function getComputerSelection() {
    const choices = ['rock', 'paper', 'scissor'];
    const randomIndex = Math.floor(Math.random() * choices.length);
    return choices[randomIndex];
}

function playRound(playerSelection, computerSelection)  {
    // 统一转小写，避免大小写问题
    const player = playerSelection.toLowerCase();
    const computer = computerSelection.toLowerCase();

    if (
        (player === "paper" && computer === "rock") ||
        (player === "scissor" && computer === "paper") ||
        (player === "rock" && computer === "scissor")
    ) {
        console.log(`Player choose ${player} and computer plays ${computer} player wins !`);
    } else if (player === computer) {
        console.log(`Player choose ${player} and computer plays ${computer} game is draw !`);
    } else {
        console.log(`Player choose ${player}, computer plays ${computer}, computer wins !`);
    }
}

// 事件委托逻辑
btnGroup.addEventListener('click', function(e) {
    const target = e.target;
    // 判断点击的是哪个按钮
    if (target.id === 'startgame') {
        alert("Choose Rock, Paper or Scissor");
    } else if (['rock', 'paper', 'scissor'].includes(target.id)) {
        // 获取电脑选择
        const computerChoice = getComputerSelection();
        // 调用playRound，传入玩家选择和电脑选择
        playRound(target.id, computerChoice);
    }
});

修改说明 #

1. 事件委托的正确用法：通过e.target获取实际点击的元素，用元素的id来判断点击的按钮，避免重复绑定事件。
2. 新增电脑选择逻辑：getComputerSelection函数随机返回rock/paper/scissor，给playRound提供必要的参数。
3. 简化playRound判断：合并玩家获胜的条件，代码更简洁；统一转小写，避免大小写匹配问题。
4. 直接触发逻辑：点击按钮时直接执行对应操作（弹出提示或调用playRound），不需要额外绑定事件。

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