Here’s my way to fix your problem.
1. Edit your turnMove()
You want to increase the turns every time a square is clicked on. It could be very simple, like this:
let turns = 0;
const turnMove = () => turns++;
2. Change the way you use turnMove()
You need to call turnMove as a function which is turnMove(), not turnMove. And yourSquareElement is a parameter from the on-click callback, you can change its name to whatever you want, but you can’t change its value.
square9.addEventListener("click", function(yourSquareElement){
if((turnMove() % 2 === 0)){}
})
Those are two things to solve your problem. One tip for you is to put variables in console.log() to see what value they’re holding. If you do that, you will see yourSquareElement is actually an Event object no matter what name you give it.
See my demo here:
let board = [
["", "", ""],
["", "", ""],
["", "", ""]
]
var square1 = document.getElementById("square1")
square1.addEventListener("click", function(el){
if(turnMove() % 2 === 0){
square1.innerHTML = "X"
board[0].splice(0, 0, "X")
}else{
square1.innerHTML = "O"
board[0].splice(0, 0, "O")
}
console.log(board)
})
var square2 = document.getElementById("square2")
square2.addEventListener("click", function(el){
if(turnMove() % 2 === 0){
square2.innerHTML = "X"
board[0].splice(1, 1, "X")
}else{
square2.innerHTML = "O"
board[0].splice(1, 1, "O")
}
console.log(board)
})
var square3 = document.getElementById("square3")
square3.addEventListener("click", function(el){
if(turnMove() % 2 === 0){
square3.innerHTML = "X"
board[0].splice(2, 2, "X")
}else{
square3.innerHTML = "O"
board[0].splice(2, 2, "O")
}
console.log(board)
})
var square4 = document.getElementById("square4")
square4.addEventListener("click", function(el){
if(turnMove() % 2 === 0){
square4.innerHTML = "X"
board[1].splice(0, 0, "X")
}else{
square4.innerHTML = "O"
board[1].splice(0, 0, "O")
}
console.log(board)
})
var square5 = document.getElementById("square5")
square5.addEventListener("click", function(el){
if((turnMove() % 2 === 0)){
square5.innerHTML = "X"
board[1].splice(1, 1, "X")
}else{
square5.innerHTML = "O"
board[1].splice(1, 1, "O")
}
console.log(board)
})
var square6 = document.getElementById("square6")
square6.addEventListener("click", function(el){
if((turnMove() % 2 === 0)){
square6.innerHTML = "X"
board[1].splice(2, 2, "X")
}else{
square6.innerHTML = "O"
board[1].splice(2, 2, "O")
}
console.log(board)
})
var square7 = document.getElementById("square7")
square7.addEventListener("click", function(el){
if((turnMove() % 2 === 0)){
square7.innerHTML = "X"
board[2].splice(0, 0, "X")
}else{
square7.innerHTML = "O"
board[2].splice(0, 0, "O")
}
console.log(board)
})
var square8 = document.getElementById("square8")
square8.addEventListener("click", function(el){
if((turnMove() % 2 === 0)){
square8.innerHTML = "X"
board[2].splice(1, 1, "X")
}else{
square8.innerHTML = "O"
board[2].splice(1, 1, "O")
}
console.log(board)
})
var square9 = document.getElementById("square9")
square9.addEventListener("click", function(el){
if((turnMove() % 2 === 0)){
square9.innerHTML = "X"
board[2].splice(2, 2, "X")
}else{
square9.innerHTML = "O"
board[2].splice(2, 2, "O")
}
console.log(board)
})
let turns = 0;
const turnMove = () => turns++;#board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
max-width: 40%;
height: 40vw;
margin: auto;
border: 2px solid black;
text-align: center;
}
.square {
background-color: aliceblue;
border: 1px solid black;
}
* {
font-size: 2.5rem;
}<html>
<head>
<title>Tic Tac Toe Game</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width-device-width initial-scale=1">
</head>
<body>
<div id="board">
<div id="square1" class="square"></div>
<div id="square2" class="square"></div>
<div id="square3" class="square"></div>
<div id="square4" class="square"></div>
<div id="square5" class="square"></div>
<div id="square6" class="square"></div>
<div id="square7" class="square"></div>
<div id="square8" class="square"></div>
<div id="square9" class="square"></div>
<script type="text/javascript" src="script.js"></script>
</div>
</body>
</html>Update: I refactored your script to make it even cleaner.
I merged all the on-click events for each square into one, hope you find this useful. Your script now is:
const board = [
["", "", ""],
["", "", ""],
["", "", ""]
];
let turns = 0;
const turnMove = () => turns++;
const squares = document.querySelectorAll('.square');
squares.forEach((thisSquare, index) => {
const col = index % 3;
const row = Math.floor(index / 3);
thisSquare.addEventListener('click', () => {
const player = turnMove() % 2 === 0 ? "X" : "O";
thisSquare.innerHTML = player;
board[row][col] = player;
console.log(row, col, board);
});
});
const board = [
["", "", ""],
["", "", ""],
["", "", ""]
];
let turns = 0;
const turnMove = () => turns++;
const squares = document.querySelectorAll('.square');
squares.forEach((thisSquare, index) => {
const col = index % 3;
const row = Math.floor(index / 3);
thisSquare.addEventListener('click', () => {
const player = turnMove() % 2 === 0 ? "X" : "O";
thisSquare.innerHTML = player;
board[row][col] = player;
console.log(row, col, board);
});
});#board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
max-width: 40%;
height: 40vw;
margin: auto;
border: 2px solid black;
text-align: center;
}
.square {
background-color: aliceblue;
border: 1px solid black;
}
* {
font-size: 2.5rem;
}<html>
<head>
<title>Tic Tac Toe Game</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width-device-width initial-scale=1">
</head>
<body>
<div id="board">
<div id="square1" class="square"></div>
<div id="square2" class="square"></div>
<div id="square3" class="square"></div>
<div id="square4" class="square"></div>
<div id="square5" class="square"></div>
<div id="square6" class="square"></div>
<div id="square7" class="square"></div>
<div id="square8" class="square"></div>
<div id="square9" class="square"></div>
<script type="text/javascript" src="script.js"></script>
</div>
</body>
</html>CLICK HERE to find out more related problems solutions.