im making tic tac toe with a bot and need to check if a cell is empty or not. i kind of did make the bot work, because it writes a random X on the board but the bot writes Xs over Os. so i need to figure out how to check if a cell contains Xs or Os if not then place the X. Right now my code is this.
const cellElement = document.querySelectorAll('[data-cell]')
const winner = document.getElementById("winner")
let nextTurn = false
let winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
]
cellElement.forEach(cell => {
cell.addEventListener("click", handleClick, { once: true })
function handleClick() {
playerTurn(cell)
checkWin()
computerTurn()
//check for draw
}
});
function playerTurn(cell) {
if (nextTurn == false) {
cell.innerHTML = "O"
nextTurn = true
}
}
function computerTurn() {
if (nextTurn == true) {
cellElement[Math.floor(Math.random() * cellElement.length)].innerHTML = "X"
nextTurn = false
}
}
function checkWin() {
for (let winCondition of winningConditions) {
if (winCondition.every(i => cellElement[i].innerHTML == "X")) {
winner.innerHTML = "X WON!!!"
} else if (winCondition.every(i => cellElement[i].innerHTML == "O")) {
winner.innerHTML = "O WON!!!"
}
}
}
what i've tried is this, but what is does is that it only put x in the first cell and then goes 1 cell ahead but even though there is a O there it just overwrites is.
function computerTurn() {
for (let i = 0; i < cellElement.length; i++) {
console.log(cellElement[i]);
if (nextTurn == true) {
if (cellElement[i].innerHTML !== "X" && "O") {
cellElement[i].innerHTML = "X"
nextTurn = false
break;
}
} else {
computerTurn()
}
}
}
you can test out the code here https://jsfiddle.net/tv01cy7x/3/
You cannot do
if (cellElement[i].innerHTML !== "X" && "O") {
cellElement[i].innerHTML = "X"
but
const val = cellElement[i].innerHTML
if ( val !== "X" && val !== "O")
In a if, every condition is evaluated independentely, so when you put an && you still need to tell him which variable to compare
In other words : if ( val !== "X" && "O") is equivalent to if ( "O" && val !== "X") and because anything which is not null or 0 or undefined, is equal to True, it is equivalent to : if ( val !== "X" && true ) so equivalent to if ( val !== "X" )
What you could do to find place a random X would be :
function computerTurn(){
r = Math.floor(Math.random() * cellElement.length);
if (cellElement[i].innerHTML !== "X" && "O") {
cellElement[i].innerHTML = "X";
return 1;
}
return computerTurn();
}