开发JavaScript石头剪刀布游戏遇分数变量递增异常问题求助

问题根源 #

• 错误的递增写法：在rock()函数里，computerScore = computerScore++;和yourScore = yourScore++;是无效操作。后置++会先返回变量当前值，再执行递增，你把返回的原值重新赋值回去，等于抵消了递增效果。直接用变量++或者变量 += 1即可。
• 分数未实时同步到DOM：页面加载时只初始化了一次分数显示，后续分数变化后没有重新更新DOM元素内容，所以就算变量值改变，页面上也看不到更新。每次分数变动后都要重新设置对应元素的textContent。

修复后的完整代码 #

let CPUchoice = []
let gameResult = document.getElementById('game-result');

let yourScore = 0;
let computerScore = 0;

// 封装分数更新函数，避免重复代码
function updateScoreDisplay() {
    document.getElementById('your-score').textContent = 'Your score is... ' + yourScore;
    document.getElementById('computer-score').textContent = 'Computer score is ....' + computerScore;
}

function computerChoice() {
    const picks = ['rock', 'paper', 'scissors'];
    CPUchoice = picks[Math.floor(Math.random()*picks.length)];
}

function rock() {
    computerChoice();
    if (CPUchoice === 'rock') {
        gameResult.textContent = "Computer chose rock, It's a draw!";
    } else if (CPUchoice === 'paper') {
        computerScore++;
        gameResult.textContent = "Computer chose paper, you lost!";
    } else {
        yourScore++;
        gameResult.textContent = "Computer chose scissors, you won!";
    }
    updateScoreDisplay();
}

function paper() {
    computerChoice();
    if (CPUchoice === 'paper') {
        gameResult.textContent = "Computer chose paper, It's a draw!";
    } else if (CPUchoice === 'scissors') {
        computerScore++;
        gameResult.textContent = "Computer chose scissors, you lost!";
    } else {
        yourScore++;
        gameResult.textContent = "Computer chose rock, you won!";
    }
    updateScoreDisplay();
}

function scissors() {
    computerChoice();
    if (CPUchoice === 'scissors') {
        gameResult.textContent = "Computer chose scissors, It's a draw!";
    } else if (CPUchoice === 'rock') {
        computerScore++;
        gameResult.textContent = "Computer chose rock, you lost!";
    } else {
        yourScore++;
        gameResult.textContent = "Computer chose paper, you won!";
    }
    updateScoreDisplay();
}

// 初始化分数显示
updateScoreDisplay();

额外优化说明 #

把分数更新逻辑封装成单独函数，避免在每个按钮点击函数里重复写DOM操作代码，让代码更简洁易维护。

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