Rock Paper Scissors UI -- issue displaying winner


#1

Hi,

I’m currently having an issue with the UI version of the Rock Paper Scissors project.

I’d like to call my nameWinner function when either the player or the computer reaches 5 points, but right now, it only runs when I click on the screen, outside of the buttons. Can someone give me a hint about fixing this?

I think the problem might be somewhere in the code below. Here’s the repo for my javascript file on github: https://github.com/MrkH615/RockPaperScissors-GUI/blob/master/main.js

Many thanks!

document.addEventListener('click', startGame = (e) => {
    if (e.target.tagName == 'BUTTON') {    //needed so playerPoints and computerPoints don't get compared before player clicks a button

   if (playerPoints < 5 && computerPoints < 5) {  //stops once one side get 5 points, but screen outside of buttons needs to be clicked to run nameWinner
   
      if (playerSelection === computerSelection) { 
        roundNumber++;
        result = tie(playerSelection, computerSelection);
     
      }  else  if (playerSelection ==="rock" && computerSelection === "paper") {
        roundNumber++;
        result = computerWins(playerSelection, computerSelection);
     
      }  else if (playerSelection === "rock"  && computerSelection === "scissors") {
        roundNumber++;
        result = playerWins(playerSelection, computerSelection);
     
      } else if (playerSelection === "paper"  && computerSelection === "scissors") {
        roundNumber++;
        result = computerWins(playerSelection, computerSelection);
      
      }   else if (playerSelection === "paper" && computerSelection === "rock") {
        roundNumber++;
        result = playerWins(playerSelection, computerSelection);
      
      } else if (playerSelection === "scissors" && computerSelection === "paper") {
        roundNumber++;
        result = playerWins(playerSelection, computerSelection); 
    
      }  else if (playerSelection === "scissors" && computerSelection === "rock") {
        roundNumber++;
        result = computerWins(playerSelection, computerSelection);
      }  
    } 
  } else if (computerPoints >= 5 || playerPoints >= 5) { // to specify when nameWinner() can be called
   
    nameWinner(playerPoints, computerPoints);

    /*
    With just else (rather than else if (computerPoints >= 5 || playerPoints >= 5) ), the  following  lets nameWinner() be called by 
    a click on the screen outside a button even after just one point has been scored  
    -- Why?
    */
   
document.addEventListener('click', (event) => {
      window.location.reload();
    });
    
  }
 
});

}

function makeHumanScore(playerPoints) {
  const humanPoints = document.querySelector('#human');
  humanPoints.textContent = `Human:  ${playerPoints}`;
} 

function makeComputerScore(computerPoints) {
  const cmptrPoints = document.querySelector('#computer');
  cmptrPoints.textContent=`Computer:  ${computerPoints}`;
} 

    playGame();

#2

I finished this project like 2 weeks ago, but I thought I’d take a stab at seeing what is going on for you. It will only trigger with a click event, because nameWinner() is inside a click event - as the else to if (e.target.tagName == 'BUTTON'). So, it will only be triggered when you click outside of any of the buttons.

So, you need to trigger the nameWinner() function outside of that click event - maybe inside the playerWins() and the computerWins() functions. Right at the 5 point threshold.


#3

Thanks for your help, @rlmoser99! I’m trying out your suggestions and moving around when I call nameWinner(). Here’s hoping!