按钮不会被禁用，直到得分达到并再次点击按钮

Question

我正在创建一个剪刀石头布应用程序。函数play()(如下所示)应该检查分数，如果任一分数为0，则应该运行endGame()函数。如果没有，播放器可以继续播放。

一切工作正常，直到得分达到5为玩家或计算机。在点击另一个按钮(石头、布或剪刀)之前，这些按钮不会被禁用。

我想这样，当玩家或电脑得分达到5时，按钮自动禁用，而无需点击另一个按钮。我有麻烦，试图让这个发生。

function play() {

calculateScore();
if(playerScore === 5|| computerScore === 5) {
endGame();
} else {
buttons.forEach(button => {
button.addEventListener("click", (e) => { 
let playerSelection = e.target.id;
console.log("player " + playerSelection);
playRound(playerSelection);
calculateScore();
});
});
}

}

下面是jsFiddle的完整代码:https://jsfiddle.net/Jiangxi123/m0g7t6eq/1/

Answer 1

问题在于您的calculateScore函数。你应该在检查是否有球员达到5分之前更新分数。

下面是函数的更正版本:

function calculateScore() {
// Update the scores
if (msg.innerHTML.includes("You Lose!")) {
computerScore += 1;
} else if (msg.innerHTML.includes("You Win!")) {
playerScore += 1;
}
// Always update the UI (just for a more readable code)
computerText.innerHTML = computerScore;
playerText.innerHTML = playerScore;

// Check the conditions on scores
if (playerScore === 5 || computerScore === 5) {
endGame();
}
}