How to reset board for tic tac toe in javascript?

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.

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().