Aaaaaarggghhhhh! Tic Tac Toe problem [SOLVED - thanks @jenovs]

Aaaaaarggghhhhh! Tic Tac Toe problem [SOLVED - thanks @jenovs]


Link is here Aaaaaarggghhhhh!!!

My problem is that I have what I believe are two conditional loops:

if (whosTurn === "Computer"){
  $('.instructions').html("<h3>" + whosTurn + "'s" + " turn" + "</h3>");
  setTimeout(computersTurn, 2000); // Set a delay on the computer's turn
if (whosTurn === "Player"){
  $('.instructions').html("<h3>" + whosTurn + "'s" + " turn" + "</h3>");

So in theory if it’s the computers turn then we enter the computersTurn function and likewise if it’s the players turn we enter the playersTurn function.

However, when the code enters the playersTurn function, it doesn’t seem to leave it, even though I change the variable whosTurn to “Computer” inside the playersTurn function. Therefore, when it’s the computers turn I can still make player moves.

Would someone please take a look, before I throw my monitor out of the window.


When your code enters playersTurn() you bind an event handler to the “click” JavaScript event, or trigger that event on an element i.e. you make those field responsible to clicks and they stay like that until you unbind them.

You can add

$("#topLeft, #topMiddle, #topRight, #middleLeft, #middle, #middleRight").off('click');

at the end of your playersTurn() function to unbind the click event.


You my friend @jenovs are a monitor saver, thanks for your time looking at this.