Simon Game player cannot click on the tile error

1

Please someone help me, I’m having a challenge to debug the Simon Game, nothing happens when the player clicks on the color tile. Am I missing something in the playerMove function or something? Thanks.

2

Well, I can’t tell you exactly what is wrong, but I can tell you that the click event on your div isn’t being detected.

Also, I don’t think that you need the onclick in the html, jquery is handling the events.

1 Like
3

The problem is in your CSS I don’t know why you put this but in “.tiles” style you have “pointer-events: none;” wich remove all interactions with the element.

1 Like
4

It seems to have something to do with .tiles. You can test this by creating a click handler on .game like so:

$('.game').click(function(e){
  console.log(e.target.id)
})

The function is passing an event object as a parameter. Whenever an element is clicked, the event object contains the target element. The console log just prints the id of the target element.

If you do this, you will notice that with .tiles you get an empty string (because there is no id on the div) when you click on one of the colored tiles. However, if you remove .tiles from the class of one of the colored tiles and then click on the tile, the console will log the id of the div.

1 Like
5

TommiPepsi got it! Man, I’ve been playing with it for an hour! Good eye. I didn’t think to check the css. I was looking all over stack overflow for issues with query click event binding. lol

1 Like
6

I actually just had a similar problem today with my simon game, I had a div inside my tiles to make a beautiful light effect, it was working in chrome but blocking the click in firefox(wich is strange). Adding the “pointer-event:none” to the div inside the tiles fixed it, so it’s the first thing that I saw while looking in his code haha :grin:

1 Like
7

Thank you!!! Never would have guessed it was in the css “pointer-events:none” creating the click event function problem. It works now.

1 Like