When running this function the first few times, it will work and display if I won the game or not when the score hits 5. But other times the score will keep incrementing (6, 7, 8, and so on). Why does the score not stop at 5 sometimes, and how do I stop this from happening?

    const playerText = document.querySelector("#playerText");
const computerText = document.querySelector("#computerText");
const resultText = document.querySelector("#resultText");
const choiceBtns = document.querySelectorAll(".choiceBtn");

let player;
let computer;


let playerScore = 0;
let computerScore = 0;



choiceBtns.forEach(button => button.addEventListener("click", () => {

    player = button.textContent;
    computerSelection();
    playerText.textContent = "Player: "   player;
    computerText.textContent = "Computer: "   computer;
    resultText.textContent = "Result: "   result();
}));



function computerSelection(){

    const randNum = Math.floor(Math.random() * 3)   1;

    switch(randNum){
      case 1:
        computer = "rock";
        break;
      case 2:
        computer = "paper";
        break;
      case 3:
        computer = "scissors";
        break;
    }
}

function disable() {
    document.getElementById("rock").disabled = true;
    document.getElementById("paper").disabled = true;
    document.getElementById("scissors").disabled = true;

  }



function result() {
    if ((player === "paper" && computer === "rock") || 
        (player === "scissors" && computer === "paper") || 
        (player === "rock" && 
            computer === "scissors" &&
            (computerScore <=5 && playerScore <=5 )))
        
        {
       
        playerScore  = 1;
        resultText.textContent = ("You win! "   "Player score: "   playerScore   " Computer score: "   computerScore);
        
        return resultText.textContent;
        }
    
    if (playerScore == 5) {
        
        resultText.textContent = ("Winner winner chicken dinner! You won the game! "   " Player score: "   playerScore   "Computer score: "   computerScore);
        computerScore = 0;
        playerScore = 0;
        disable();
        return resultText.textContent;
        
    }
  

    
    else if 
        ((player === "rock" && computer === "paper") || 
        (player === "paper" && computer === "scissors") || 
        (player === "scissors" && 
        
            computer === "rock" && 
            (playerScore <=5 && computerScore <=5))
        
        
        ) {

        
        computerScore  = 1;
        resultText.textContent = ("You lose! "  "Player score: "   playerScore   " Computer score: "   computerScore); 
        
        return resultText.textContent;
    
    }
        if (computerScore == 5) {
        
            
            
            resultText.textContent = ("You lost the game!!!!! "   " Player score: "   playerScore   " Computer score: "   computerScore);
            computerScore = 0;
            playerScore = 0;
            disable();
            return resultText.textContent;

            
        }
    

    else (computer == player)
{
    resultText.textContent = ("Draw! "   "Player score: "   playerScore   " Computer score: "   computerScore);
    
    return resultText.textContent;

} 

}  

When running this function the first few times, it will work and display if I won the game or not when the score hits 5. But other times the score will keep incrementing (6, 7, 8, and so on). Why does the score not stop at 5 sometimes, and how do I stop this from happening?

CodePudding user response：

Your code is too messy, please refactor the code, after that find your bug later.

> Compute the result
> If player win set playerPoint  ;
> else set computerPoint  ;
// draw, go to new game.

> Check the winner
> if playerPoint >= 5 --> show message;
> else if computerPoint >=5 --> show message;

> end. go to new game.

Your code stop because you return too soon.

CodePudding user response：

There are some issues with your result function:

function result() {
  if (
    ((player === "paper" && computer === "rock") ||
      (player === "scissors" && computer === "paper") ||
      (player === "rock" && computer === "scissors")) &&
    playerScore   1 <= 5
  ) {
    console.log({
      test: computerScore <= 5 || playerScore <= 5,
      computerScore,
      playerScore,
    });
    playerScore  = 1;
    resultText.textContent =
      "You win! "  
      "Player score: "  
      playerScore  
      " Computer score: "  
      computerScore;

    if (playerScore == 5) {
      resultText.textContent =
        "Winner winner chicken dinner! You won the game! "  
        " Player score: "  
        playerScore  
        "Computer score: "  
        computerScore;
      computerScore = 0;
      playerScore = 0;
      disable();
    }
    return resultText.textContent;
  } else if (
    ((player === "rock" && computer === "paper") ||
      (player === "paper" && computer === "scissors") ||
      (player === "scissors" && computer === "rock")) &&
    computerScore   1 <= 5
  ) {
    computerScore  = 1;
    resultText.textContent =
      "You lose! "  
      "Player score: "  
      playerScore  
      " Computer score: "  
      computerScore;

    if (computerScore == 5) {
      resultText.textContent =
        "You lost the game!!!!! "  
        " Player score: "  
        playerScore  
        " Computer score: "  
        computerScore;
      computerScore = 0;
      playerScore = 0;
      disable();
    }
    return resultText.textContent;
  } else {
    resultText.textContent =
      "Draw! "  
      "Player score: "  
      playerScore  
      " Computer score: "  
      computerScore;

    return resultText.textContent;
  }

Your conditions:

if ((player === "paper" && computer === "rock") || 
        (player === "scissors" && computer === "paper") || 
        (player === "rock" && 
            computer === "scissors" &&
            (computerScore <=5 && playerScore <=5 )))

There's no need to check the computerScore if only the score for the player will be affected by the player winning a round. Same applies to the inverse of this if statement. Also, the score will exceed 5 because you are checking computerScore and playerScore before incrementing them. You can either add the increment value (in this case 1) in the if statement or you could add a nested if statement after the increment.