Question about using Javascript to remove Classes

[ekami]

Hello!

I decided to give myself a project, and am working on coding a game of blackjack on codepen- here

The problem I’m having is sometimes, the script I’m using to remove the class and animate the cards being dealt out doesn’t always seem to work, and I’m not sure why. It looks like the card is being added, but the class isn’t being removed, so it stays off screen.

I have this function that I run on a timeout, but it feels like there has to be a better way to do this.

const delayedFunc = (obj) => {
document.getElementById(obj.id).classList.remove(“played”)
}

setTimeout(delayedFunc.bind(null, activeCard), timer)

I’d really appreciate any help, since I don’t have anyone around who knows coding well enough to advise me in person.

[lasjorg]

When debugging, I would advise you remove anything “extra” so you are only looking at the core logic. Did you try removing the setTimeout? Are you sure it is related to the bug, because even without it, the bug still happens as far as I can tell?

---

Sometimes the same id is added to more than one card. So your getElementById will select the wrong card and try to remove the class from it.

It can happen with both decks, the dealer can have a card with the same id as the player, as can the player’s deck have two cards with the same id. Here are two objects with the same id.

{suit: 'hearts', value: 6, id: 'card5'}
{suit: 'diamonds', value: 6, id: 'card5'}

DOM images:

[ekami]

I can’t believe I overlooked this! Thank you so much.