如何通过按钮点击存储用户选择值实现HTML版石头剪刀布游戏

核心逻辑是替换原来的prompt()输入方式，通过按钮点击事件获取用户选择，不需要全局存值再手动调用函数，直接把选择当参数传入对局逻辑即可。 #

第一步：优化HTML结构 #

给三个选择按钮加统一类名和data-choice自定义属性，存对应出拳值，方便后续取值；额外加计分和结果展示区域：

<div class="boxes">
    <div class="box">
        <button class="choice-btn" data-choice="rock">
            <img class="rock-img" src="images/rock.png" alt="Rock image">
        </button>
    </div>
    <div class="box">
        <button class="choice-btn" data-choice="paper">
            <img class="paper-img" src="images/paper.png" alt="Paper image">
        </button>
    </div>
    <div class="box">
        <button class="choice-btn" data-choice="scissors">
            <img class="scissors-img" src="images/scissors.png" alt="Scissors image">
        </button>
    </div>
</div>
<div class="score-board">
    <p>你的得分：<span id="user-score">0</span></p>
    <p>电脑得分：<span id="computer-score">0</span></p>
    <p id="round-result"></p>
</div>

第二步：重写JS逻辑 #

删掉原来的prompt()取值、for循环跑5局的逻辑，改成事件触发式执行：

const choices = ['Rock', 'Paper', 'Scissors'];
// 计分变量
let userScore = 0;
let computerScore = 0;

// 取DOM元素
const choiceButtons = document.querySelectorAll('.choice-btn');
const userScoreEl = document.querySelector('#user-score');
const computerScoreEl = document.querySelector('#computer-score');
const roundResultEl = document.querySelector('#round-result');

// 生成电脑随机出拳
function getComputerChoice() {
    return choices[Math.floor(Math.random() * choices.length)];
}

// 单局逻辑，接收用户出拳作为参数
function playRound(userGuess) {
    const userChoice = userGuess.toLowerCase();
    const computerChoice = getComputerChoice().toLowerCase();
    let resultText = '';

    // 平局判断
    if (userChoice === computerChoice) {
        resultText = `平局！你出了${userChoice}，电脑出了${computerChoice}`;
    } 
    // 获胜判断
    else if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'paper' && computerChoice === 'rock') ||
        (userChoice === 'scissors' && computerChoice === 'paper')
    ) {
        userScore++;
        resultText = `你赢了！你出了${userChoice}，电脑出了${computerChoice}`;
    } 
    // 失败判断
    else {
        computerScore++;
        resultText = `你输了！你出了${userChoice}，电脑出了${computerChoice}`;
    }

    // 更新页面展示
    userScoreEl.textContent = userScore;
    computerScoreEl.textContent = computerScore;
    roundResultEl.textContent = resultText;

    // 满5局结算
    if (userScore + computerScore === 5) {
        setTimeout(() => {
            const finalText = userScore > computerScore ? '恭喜，你获得最终胜利！' : '很遗憾，你输掉了对局';
            alert(`${finalText} 最终比分：你 ${userScore} : ${computerScore} 电脑`);
            // 重置对局
            userScore = 0;
            computerScore = 0;
            userScoreEl.textContent = 0;
            computerScoreEl.textContent = 0;
            roundResultEl.textContent = '';
        }, 100);
    }
}

// 给所有按钮绑定点击事件
choiceButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 从data属性取当前按钮对应的出拳值
        const selectedChoice = button.dataset.choice;
        // 直接执行单局逻辑
        playRound(selectedChoice);
    });
});

关键说明 #

• 点击取值的核心是addEventListener监听按钮点击事件，触发时通过元素的dataset属性读取提前绑定的出拳值，不需要额外定义全局变量存储，直接传参给处理函数即可，避免全局变量污染。
• 原来的多层嵌套if判断胜负冗余度太高，直接枚举所有获胜组合即可，代码量减少60%以上。
• 网页版交互不需要for循环一次性跑5局，用户每点击一次按钮触发一次单局逻辑，累计局数到5再弹出最终结果即可，符合页面交互逻辑。
• 你之前只给剪刀按钮加了未定义的logValue()内联事件，另外两个按钮没有绑定事件，点击自然没有反应，不推荐用内联onclick绑定事件，addEventListener更灵活，也方便后续解绑事件。

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