Can't click on elements after clearing text in javascript with for loop

Can't click on elements after clearing text in javascript with for loop
0.0 0

#1

I’m working on a restart button for a tictactoe game with a function I called game.prototype.restart. In it I just reset all the values I used to determine the players symbol and the turns the computer and player made, and I also used a for loop to go over all the elements that a x or o symbol can be placed and I cleared the text content of them with a space string.

game.prototype.restart = function () {
    document.querySelector('.result').style.visibility = 'hidden';
    document.querySelector('.sign').style.visibility = 'visible';
    this.player = null;
    this.computer = null;
    this.turns = 0;
    this.playerChoices = [];
    this.computerChoices = [];
    this.spotsLeft = [0,1,2,3,4,5,6,7,8];
    for(let i = 0; i < this.squares.length; i++){
        this.squares[i].textContent = ' ';
    }
}

But after I activate the function game.restart, I am unable to click on any of the elements I made where x or o symbols are supposed to go. I’m not sure whats causing this because there are no errors in the console. However, sometimes when I rapidly click on an element a symbol might appear, I’m not sure why, but it happens randomly when I click a lot on an element.

Here is the parent function of the prototype for comparison which is similar, but I haven’t had any issues with this function:

function game () {
  this.player = null;
  this.computer = null;
  this.turns = 0;
  this.playerChoices = [];
  this.computerChoices = [];
  this.squares = document.querySelectorAll('.play');
  this.spotsLeft = [0,1,2,3,4,5,6,7,8];
  this.winningCombos = [
    [0, 1, 2],[6, 7, 8],[0, 3, 6],[1, 4, 7],[2, 5, 8],
    [0, 4, 8],[2, 4, 6], [3,4,5]
  ];

  for(let i = 0; i < this.squares.length; i++){
    this.squares[i].addEventListener('click', (function() {
      this.playerMove(i);
    }).bind(this));
  }
}

There are no errors appearing in my browsers console, so I’m not sure at all whats causing this. I think it may have something to do with my for loop though. I would appreciate any help with this.

Link to a codepen of it : https://codepen.io/icewizard/pen/XEMmGZ


#2

Hey aioy,

You have to re-add the “play” class on reset/replay, because you remove it from all squares during the first round.

Let me know if this helps.


#3

The following line in your playerMove function is checking if the play class is present on the square being clicked. You remove this class off each square the player clicks or the computer selects and never add it back on the restart of the game.

if(this.squares[i].classList.contains('play')){

#4

thank you randelldawson and pwkrz, I forgot about that line of code. I added the classes back in my for loop and its working now. Thanks!


#5

FYI - I would strongly suggest thinking how you could make your code DRY for the game function and the restart function. The following lines are all repeated.

  this.player = null;
  this.computer = null;
  this.turns = 0;
  this.playerChoices = [];
  this.computerChoices = [];
  this.spotsLeft = [0,1,2,3,4,5,6,7,8];

#6

Thank you very much for the feedback, but I think I’ll refactor it later and work on the simon game now. I’ll keep making dry code in mind for that.