How to reset board for tic tac toe in javascript?

Question

function resetBoard() {
    currentPlayer = 1;
    isGameStarted = false;
    gameBoard = [
        [null, null, null],
        [null, null, null],
        [null, null, null]
    ];

    const startButton = document.getElementById("start-btn");
    startButton.disabled = false;

    const playerNames = document.querySelectorAll(".player-name");
    playerNames.forEach(name => name.classList.remove("active"));

    const cells = document.querySelectorAll(".cell");
    cells.forEach(cell => {
        cell.textContent = "";
        cell.classList.add("disabled");
        cell.style.backgroundColor = "#d7bbf7";
    });

    const resultDiv = document.getElementById("current-player");
    resultDiv.textContent = "";

    const messageDiv = document.getElementById("message");
    messageDiv.textContent = "";

    const gameBoardDiv = document.getElementById("game-board");
    gameBoardDiv.style.display = "none";

    player1Name = "";
    player2Name = "";
    document.getElementById("player1-name").textContent = "Player 1";
    document.getElementById("player2-name").textContent = "Player 2";
}


function makeMove(row, col) {
    if (!isGameStarted) return;

    const cell = document.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1})`);
    if (cell.textContent !== "") return;

    if (currentPlayer === 1) {
        cell.textContent = "X";
        gameBoard[row][col] = "X";
    } else if (currentPlayer === 2) {
        cell.textContent = "O";
        gameBoard[row][col] = "O";
    }

    if (checkWin()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "You won, " + getCurrentPlayerName() + "!";
        isGameStarted = false;
        resetBoard();
    } else if (checkDraw()) {
        const resultDiv = document.getElementById("message");
        resultDiv.textContent = "It's a draw!";
        isGameStarted = false;
        resetBoard();
    } else {
        currentPlayer = currentPlayer === 1 ? 2 : 1;
        const resultDiv = document.getElementById("current-player");
        resultDiv.textContent = "It's your turn " + getCurrentPlayerName();
    }
}

Why my function resetBoard() doesn't work? i.e. it does work but when I finish one game it doesn't let me see result, if it's either draw or it has winner, but it immediately reset board. I wanna now why this is happening and how to fix this, if someone is willing to help.

Answer 1

Problem

That's quite simple. But to understand what the problem is let's talk about the structure in which your code runs:

Flow

1. Make move
2. Check for result
3. [Win/Draw] -> resultDiv.textContent = "Whatever the result is"
4. ResetBoard -> resultDiv.textContent = ""; (line 23)

So what's happening here is, your code does set the result but right after setting result, it resets board which resets the result div's content

Solutions

Solution 1

Every problem has multiple solutions. But what the easiest solution here I think is that instead of resetting the board right after the game ends, just show the result, hide the board, and show a button that'll reset the board on click. This not only solves the issue but also improve the UX

<button onclick="resetBoard()">Play Again</button>

Solution 2:

if you did not like the one above then, you can use alert box to show the message/result

Solution 3:

Another solution would be to remove the text only after a move is made instead of during board reset. i.e. Don't remove text in resetBoard(), instead, remove the text in makeMove().