Adding a clickable class to a div (Simon game)

1

Hi

In my simon game I am trying to stop the user from being able to click on game buttons before turning the game on with a toggle switch.

To do this I tried making the simon game buttons into an onclick function linked to a class that I would only add to them once they turn the game on, so while the game is off the divs are just dead color divs that do nothing. I also gave this class a pointer cursor in css.

However, after turning the switch on I manage to get the pointer cursor working but my onclick function doesnt work. Would anyone know why?

my code to add the class on line 90 is
$(".color-button").addClass(“color-button-click”);

where color buttons is the predefined class for the red, yellow, green and blue color divs.

and my code for an onclick function is on line 28
$(".color-button-click").click(function(){
…stuff…
});

Is it because “color-button-click” doesnt actually relate to anything when the page when its first loaded? Is this even possible to do? the class must be being added because in the css I have
.color-button-click:hover{
cursor: pointer;
}
which makes the pointer appear after clicking on

Thanks to anyone that can help.

2

Just add an IF statement to each click handler, if the variable showing the toggle if the toggle is on or off don’t process the click. Something like:
if (toggle == on){ doCoolStuff(); } else { // Toggle is off, do nothing! }

1 Like
3

Well I feel like an idiot, it seems so obvious now. Thanks heaps.

1 Like
4

No problem, feel free to ask if you have further questions :slight_smile:

1 Like