在达到分数并再次单击按钮之前，按钮不会禁用

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();
  }
}