Rock Paper Scissors Project


#1

Hello i am a beginner in front end development and i am currently stuck on the second version of this task. i am just learning about events in dom. My probem here is that i can’t remove the click events from the buttons nor i can console.log(“Game Over”). The last if isn’t working at all actually meaning i can press the buttons infinitely. Thanks for your help.


#2

Hello @mit20andrei

Thank you for reaching out for help.

I have tried out your code and
it seems that the last if statement below is working fine because
I was able to get the console log for “Game Over!”.

I have attached the screenshot of the console log for you reference.

(if(playerScore==3 || computerScore==3){)

RockPaperScissors

From your question; I guess you want to disable the buttons after game over so that the player is unable to press them.

If that is the case you should use “.disabled = true” to disable the button from pressing.

rockChoice.disabled = true;
paperChoice.disabled = true;
scissorsChoice.disabled = true;

I guess the “.removeEventListener” only remove the relationship from event listener with button;
so that pressing the button will not have any events been triggered.

The code I tested with disabled buttons as below:

<!DOCTYPE html>
<html>
	<head>
		<!--
		  <link rel="stylesheet" type="text/css" href="style.css">
		-->
		    <title>Page Title</title>
	</head>
	<body>
		  <div id="score"></div>
		    <button id="rock">Rock</button>
		      <button id="paper">Paper</button>
		        <button id="scissors">Scissors</button>
			  <script>

  let options = ["rock", "paper", "scissors"];
  let playerScore = 0;
  let computerScore = 0;

  var rockChoice = document.getElementById("rock");
  var paperChoice = document.getElementById("paper");
  var scissorsChoice = document.getElementById("scissors");

  rockChoice.addEventListener("click", help1);
  paperChoice.addEventListener("click", help2);
  scissorsChoice.addEventListener("click", help3);

  function computerPlay(){
	      var random = Math.floor(Math.random()*options.length);
	      return options[random];
	    }
  function help1(){
	      return playRound("rock", computerPlay());
	    }
  function help2(){
	      return playRound("paper", computerPlay());
	    }
  function help3(){
	      return playRound("scissors", computerPlay());
	    }

  function playRound(playerSelection, computerSelection){
	      if(playerSelection=="scissors" && computerSelection=="rock"){
		            computerScore+=1;
		            console.log("You lose! Rock beats scissors!");
		          }
	      else if(playerSelection=="scissors" && computerSelection=="paper"){
		            playerScore+=1;
		            console.log("You win! Scissors beat paper!");
		          }
	      else if(playerSelection=="rock" && computerSelection=="paper"){
		            computerScore+=1;
		            console.log("You lose! Paper beats rock!");
		          }
	      else if(playerSelection=="rock" && computerSelection=="scissors"){
		            playerScore+=1;
		            console.log("You win! Rock beats scissors!");
		          }
	      else if(playerSelection=="paper" && computerSelection=="rock"){
		            playerScore+=1;
		            console.log("You win! Paper beats rock!");
		          }
	      else if(playerSelection=="paper" && computerSelection=="scissors"){
		            computerScore+=1;
		            console.log("You lose! Scisoors beat paper!");
		          }
	      else console.log("It's a tie");
	      if(playerScore==3 || computerScore==3){
		            console.log("Game Over!");
		            rockChoice.removeEventListener("click", help1);
		            paperChoice.removeEventListener("click", help2);
		            scissorsChoice.removeEventListener("click", help3);
		            rockChoice.disabled = true;
		            paperChoice.disabled = true;
		            scissorsChoice.disabled = true;
		          }
	    }

  </script>
	</body>
</html>

Henry


#3

Yes you guessed it right i’m trying to “stop” the game by removing the events from buttons when one of the players wins 3 rounds. This is weird. I made the.disabled change and nothing has improved. No “Game Over!” printed out still. Maybe you are using some other brower from the looks of those buttons? I am using chrome and this problem is really giving me a headache. Also i don’t understand why the buttons are not cleared “empty” after using removeEventListener. In my logic from what i watched on youtube that should be enough to revert the buttons to their original state (doing nothing when pressed).


#4

Hello @mit20andrei

The web browser I am using is:
Firefox Quantum 66.0.3 (64-bit)

  1. Do you get the console log other than “Game Over!”?
  2. Do you have JavaScript enabled in the web browser?

Henry


#5

I get console.log out only on the round winning/losing text. Ex:(It’s a tie; You lose! Rock beats scissors!; and so on). If i try to do another console.log outside of those if/else statements it doens’t work. I even tried to put the whole if statement at the beginning of the playRound function and even removing the if condition (leaving only the console.log and the removeEventListener stuff). No change.
Yes javascript is enabled in chrome. I tried in internet explorer aswell but no difference. This is ridiculous.


#6

Hello @mit20andrei

It is working fine on my Chrome web browser as well. :sweat_smile:

Google Chrome Version 73.0.3683.103 (Official Build) (64-bit)

Henry


#7

Hello @mit20andrei

I do not know if it works but I think it is better to have curly braces at the “else” statement as below.

else
{
    console.log("It's a tie");
}

Can you try this out and let me know?

Henry


#8

Yes still no change. I took a picture so that you won’t think i am crazy. I am just spamming the buttons randomly here. I have copied the exact text you uploaded earlier + else brackets added.


#9

Hello @mit20andrei

Thank you for the screenshot; and I do not think you are crazy. :sweat_smile:
I can see from you screenshot that it is not detecting the

if(playerScore==3 || computerScore==3){

From the fact that it is working on my environment but not on your environment;
I guess it is problem with the setup or the difference of the environment.

Henry


#10

Hello @mit20andrei

Can you console log the scores of the each player each time the “playRound” function is called?

For example like below:

console.log("You lose! Rock beats scissors!" + "computerScore: " + computerScore + "playerScore: " + playerScore);

I want to know whether the scores for each players are retained during the game.
Because from the bug it seems that the conditions “if(playerScore==3 || computerScore==3)” are not met.

Henry


#11

I got it now. Turns out the browser was accesing another file with the same name that i created in order to arrange the files from odin project better. Sorry for this. I know i am looking like an idiot for forgetting to open the correct file after cloning it. Thanks for your time a lot. Every day i learn something new lol


#12

Hello @mit20andrei

Glad to know you are able to pinpoint the cause of the problem.

Maybe checking the timestamp of the files you are going to open can avoid this sort of problem in the future.

Henry