Rock, paper, scissors buttons won't work after images added

In my rock, paper, scissors game I added pictures inside the buttons but now they don’t work correctly. In my browser sometimes I am able to click only one of the buttons a few times and then clicking doesn’t work. Other times I can click all three of them a few times then it stops. The game ends when a computer or a player reaches five points. It was working perfectly before I added the images. Here is the code: https://codepen.io/krykck/pen/wvawOxP

On line 39, use e.currentTarget.id instead of e.target.id

1 Like

BTW, the play again button code document.location.reload() won’t work on Codepen (it might work in the Debug mode view), you can try using history.go(0); instead.

Thank you so much! I was trying for hours. But I don’t understand why it was working properly before I added the pictures.

Look at the docs and see if you can figure out why based on the differences between target and currentTarget.

Here is a hint, open the console (Ctrl+Shift+J) and look at what is being logged out when you click the boxes.
https://jsfiddle.net/j10rnyev/

1 Like

Thanks a lot for the explanation, you are awesome! So if I understand correctly, with e.target.id, the reason why buttons don’t work properly is that sometimes <img src="..."> part is activated and sometimes <button id="..."><img src="..."></button> part is activated depending on where it is clicked.

Yep, you got it.

The reason why the click target change is because an image element is an replaced element and by default, it acts like an inline-block element which has some white space. If you set the image to use display: block it would never work, i.e. the target would always be the image and never the button.