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