JS新手开发石头剪刀布游戏：点击按钮无响应求技术排查

你的代码存在几个核心问题，导致点击按钮后控制台无输出，逐个拆解说明：

1. 事件回调参数错误 #

addEventListener绑定的点击回调函数，默认第一个参数是事件对象（Event），不是你自定义的userChoice和compChoice。你在函数里声明这两个参数后，会直接覆盖全局的compChoice变量，导致函数内的compChoice实际是事件对象，和字符串"rock"/"paper"/"scissors"永远不匹配，自然不会触发console.log。

2. 电脑选择仅初始化一次 #

页面加载时你只调用了一次getComputerChoice()，之后每次点击按钮电脑都用同一个固定选择，既不符合游戏逻辑，也会导致后续判断逻辑失效。

3. 变量覆盖与文案错误 #

• 函数内的compChoice参数覆盖了全局变量，导致无法访问正确的电脑选择；
• scissorsRound里的胜利文案写错了，应该是"User wins! Scissors beats paper."，而非重复的Paper beats rock。

修复后的完整代码 #

// 重构为纯函数，返回电脑选择，避免全局变量污染
function getComputerChoice() {
    let compChoice = Math.random();
    if (compChoice < 0.34) {
        return "rock";
    } else if (compChoice <= 0.67) {
        return "paper";
    } else {
        return "scissors";
    }
}

// 统一胜负判断逻辑，减少重复代码
function playRound(userChoice) {
    const compChoice = getComputerChoice();
    let gameResult = "It's a tie!";

    if (
        (userChoice === "rock" && compChoice === "scissors") ||
        (userChoice === "paper" && compChoice === "rock") ||
        (userChoice === "scissors" && compChoice === "paper")
    ) {
        gameResult = `User wins! ${userChoice.charAt(0).toUpperCase() + userChoice.slice(1)} beats ${compChoice}.`;
    } else if (userChoice !== compChoice) {
        gameResult = `User lost. ${compChoice.charAt(0).toUpperCase() + compChoice.slice(1)} beats ${userChoice}.`;
    }

    console.log(gameResult);
}

// 绑定点击事件，直接传递用户选择
document.getElementById("rock").addEventListener("click", () => playRound("rock"));
document.getElementById("paper").addEventListener("click", () => playRound("paper"));
document.getElementById("scissors").addEventListener("click", () => playRound("scissors"));

修复说明 #

1. 将getComputerChoice改为纯函数，返回电脑选择，避免全局变量的意外修改；
2. 提取统一的playRound函数，简化重复逻辑，让代码更易维护；
3. 使用箭头函数绑定点击事件，直接传递用户选择，避免参数混淆；
4. 每次点击都重新生成电脑选择，符合游戏的随机性要求；
5. 修复文案错误，用模板字符串简化结果拼接，提升可读性。

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