Why does my click event only fire once?

Hi guys

I have created a little random playing card image generator which is fired by a button click.

What is driving me crazy is that it only fires ONCE - why can I not click it again to generate another random card image? I have to refresh the page to be able to fire it again

let cardArr = [’./card1.jpeg’, ‘./card2.png’, ‘./card3.png’];
let randomCard = document.getElementById(‘randomCard’);

let randEq = Math.floor(Math.random() * cardArr.length);
let randCard = cardArr[randEq];

function pickCard() {
randomCard.src = randCard;
if (randomCard.src = randCard) {
randomCard.src = randCard;
}
}

cardReveal.addEventListener(‘click’, pickCard);

Im not sure if this has anything to do, but here:

The length of your array is 3, but the index of the very last element of the array is 2 (since indexes start at 0). So this line could produce a 3, and there’s no element at index 3.

I’m not sure why you wrote this conditional, but when you want to compare values, you should use the == operator, not the = assignment operator.

1 Like

Hmm, the random card generator seems to work ok with ‘cardArr.length’, and all tutorials show it like this.

You are right about the code block though, let me edit that.

let cardArr = [’./card1.jpeg’, ‘./card2.png’, ‘./card3.png’];
let randomCard = document.getElementById(‘randomCard’);

let randEq = Math.floor(Math.random() * cardArr.length);
let randCard = cardArr[randEq];

function pickCard() {
randomCard.src = randCard;
}

cardReveal.addEventListener(‘click’, pickCard);

Oh, then I must’ve made a mistake. :sweat_smile:

I’m guessing your code still doesn’t work…? Or were you able to fix it?

The click event fires every time, but the part that is responsible for generating the random card is not part of the function which is executed when the event is triggered

so your program generates a random card once, and then sets the source of the image to this element every time you click the button

1 Like

would an ‘if’ statement help to remedy this stetim?

How and why would an if statement help?

you need to think about which logic should be placed where. Which logic should be executed once (like defining the deck) and which logic needs to execute every time a click event occurred (generating random number, selecting a random card)

the logic that needs to execute every time the event is fired, should be moved to the function which is then executed

Thanks stetim

i’m really struggling to understand how I haven’t done this

‘randomCard’ is the image placeholder id, and inside my function to be executed I have put:

function pickCard() {
randomCard.src = randCard;
}

Is this not changing the image displayed for ‘randomCard’ each time the event listener fires?

Its “changing” the image displayed, but with the same card/image over and over again. There is no randomness

imaging I sit across the table from you, and we are role-playing/mimicking your program, every time I ask for a card (click the button) you would just hand me the same card, over and over again.

my point is that the click event fires every time, and the DOM is updated. But you don’t generate a random card every time the button is clicked

the random card is generated once (when the JavaScript is rendered) in the beginning. And that one-time random generated card is used throughout your program

So what I’m getting from what you’re saying is that I need to define everything INSIDE the 'pickCard ’ function for it to generate a new card each time?

You need to understand what to put inside your function and why.

Defining the card deck only needs to be done once for example.

but getting a random card should be inside the function, yes, so every time the button is clicked, that a new random card is generated