Rock Paper Scissors with DOM -- need help with finishing touches

Hi, I’m almost finished with the Rock Paper Scissors exercise using the DOM. Here’s my CodePen:

Can you help me with two things though?

  1. I would like to reset the score counters when either one reaches 5. Do you know why this last part isn’t working?
if (playerScore >= 5 || computerScore >= 5)
{cont.appendChild(contbut);
newGame.addEventListener('click', function() {
    let playerScore = zero
    let computerScore = zero
  1. I would also like the rock/paper/scissor buttons to stop working after either player has reached 5 points. I tried using the technique of
Rock.RemoveEventListener('click', function() {};

But I did not know what function to define to make this work.

I’m almost there, and would be grateful for your help! Thank you!

I went to discord and got some answers for my first question!

sourmangoToday at 8:43 PM

if (playerScore >= 5 || computerScore >= 5)
{cont.appendChild(contbut);
cont.addEventListener('click', function() {
    playerScore = 0
    computerScore = 0
  pscore.textContent = playerScore;
cscore.textContent = computerScore;
} )}

changed NewGame to cont
and removed let from the score variables.

sourmangoToday at 8:52 PM

yes, so inside functions a new scope is always created

[ 8:52 PM ]

so event if you have playerScore set globally, using let playerScore inside a function creates a brand new variable.

Hey acchang,

I hope you don’t mind me not answering your second question directly, but I posted once about removing event listeners for the Etch a Sketch project, and I think that will get you on the right track: Etch-a-Sketch Project

The key is to use a named function when you add the event listener; then you can remove it by using its name.

Thanks for taking a look and the hint @andrewjh271. You’re right, I needed to name the callback function, I think I got it! Some folks in the Discord said similar:

MarvinToday at 2:29 PM

in order to remove an event listener it must be named.

[ 2:31 PM ]

something.addEventListener('click', (e) => e.target.value);
somethingElse.addEventListener('click', (e) => e.target.value);

^ these two do the same thing but the callbacks reference different functions, those two functions technically aren’t the same.

[ 2:32 PM ]

const callback = (e) => e.target.value;
something.addEventListener('click', callback);
somethingElse.addEventListener('click', callback);

^^ in this case, they are both being passed the same reference to the callback Which would then allow for removeEventListener(‘click’, callback);

timatoToday at 3:24 PM

You need to pass e in the argument parameters

[ 3:24 PM ]

function choiceFunction(e)

[ 3:26 PM ]

But, if the only job of choiceFunction is to get the id and call playRound, why can’t you just call playRound from the event listener?

acchangToday at 3:31 PM

thanks for your response @timato! I tried this to do this to see if e.id would be set to playerSelection but I get it as undefined . I want to set playerSelection = e.id because I use playerSelection elsewhere in my code to do things like announce what the player has played, what the computer has played, and what weapon beats what weapon.

[ 3:31 PM ]

Rock.addEventListener('click', choiceFunction);

function choiceFunction(e) {
  playerSelection = e.id;
  alert(playerSelection);}

![ ]

timatoToday at 3:31 PM

it would be e.target.id

[ 3:32 PM ]

e represents the event object passed by the event listener, the target property of that object is the element that the event was fired from

acchangToday at 3:33 PM

ahh! got it. Thank you.

Awesome, glad you got it working!

Someone else in the Discord also suggested toggling the DIV holding the buttons to disappear when the score reached 5, I tried that too, also a nice solution:

  var x = document.getElementById("togglediv");
  if (playerScore >= 5 || computerScore >= 5 ) {
    x.style.display = "none";} 
else if (playerScore < 5 && computerScore < 5 )
    {x.style.display = "block"};
  }```