removeEventListener/addEventListener

[evanvacchi]

I’m working on a Euchre card game for my portfolio, and I’m having a lot of trouble figuring how to have the program stop the user from clicking another card. I’m super new to JS , HTML, & CSS but if someone can give me a tip to make my eventListener better it would be much appreciated.

More context: There are 5 cards in a hand and a player can discard only one, so I have the first click right, however I don’t know how to do the proper removeEventListener and my code is super redundant. If someone could please help that would be amazing!

[jsdisco]

First of all, you shouldn’t attach four event listeners when you only need one. You can do this instead:

playerCardSlot1.addEventListener('click', () => {
    playerCardSlot1.innerHTML = '';
    upcard.classList.remove('deck');
    .....
})

Also, since all your handlers do the same, you could use just one callback function for all of them.

Second, if you want to remove an event listener, your callback can’t be an anonymous function, it needs to have a name. You can remove it like this:

playerCardSlot1.removeEventListener('click', functionName)

Alternatively, you an use CSS to disable pointer events, so the event won’t fire. Give the element a class disabled when you don’t want the player to be able to click anymore, then in CSS:

playerCardSlot1.disabled {
  pointer-events:none;
}

[brandon_wallace]

@evanvacchi What you can do is to collect all elements using querySelectorAll. Then you can add an event listener to each element using forEach. Then you target items using currentTarget

HTML

<button class="bttn">START</button>
<button class="bttn">RESET</button>
<button class="bttn">STOP</button>

JavaScript

const bttn = document.querySelectorAll('.bttn');

bttn.forEach(item  => {
  item.addEventListener('click', event => {
    console.log(event.currentTarget.textContent)
  });
});

[evanvacchi]

@jsdisco Thank you so much! This was extremely helpful.

[evanvacchi]

@jsdisco if I have a class method that has a ‘click’ addEventListener that calls another method with a click event how do I make it so they are two distinct/separate clicks? For example:

pickUp() {
upcard.addEventListener('click', () => {
this.playerDiscard()
...

above the user clicks on the card they’re adding to their hand and the other method looks like this:

playerDiscard(){
playerCardSlot1.addEventListener('click', this.clickHandler())
playerCardSlot2.addEventListener('click', this.clickHandler())
}

I 'm assuming the first click event is triggering the playerDiscard() click event (playerCardslot1) however my problem is that the user should be able to click again to select whatever playerCardSlot they want to discard. Should I be adding a conditional statement above the playerDiscard event listeners or just remove the pickUp event listener? I have read a lot of documentation online, but am still not sure what to do. I would greatly appreciate some advice here. Thank you again.