[SOLVED] how do i check if a cell in tic tac toe is chosen or not

Issue

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/

Solution

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();
}

Answered By – vinalti

Answer Checked By – Dawn Plyler (BugsFixing Volunteer)