What I have setup for now is a function that refreshes the page. but I would like to have it manually restart without page refresh. I tried setting the board array back to empty values and tried to set textContent of the squares to empty as well but could not make it work.

This is what i have set up on my JS at the moment. Ive been stuck on this for quite awhile. pls help

var playerX = "X";
var playerO = "O";
var currentPlayer = playerX;
var gameStart = false;

window.onload = function() {
    setBoard();
}

function setBoard() {
    board = [
        [' ', ' ', ' '],
        [' ', ' ', ' '],
        [' ', ' ', ' ']
    ]

    for (let i = 0; i < 3; i  ) {
        for (let j = 0; j < 3; j  ) {
            let square = document.createElement("div"); //creates divs in board container
            square.id = i.toString()   "-"   j.toString(); //adds id to each square
            square.classList.add("square");
            if (i == 0 || i == 1) { //adds the borders
                square.classList.add("horizontal-line");
            }
            if (j == 0 || j == 1) {
                square.classList.add("vertical-line");
            }
            square.addEventListener("click", setSquare); //event listener
            document.querySelector("#board").append(square);
            document.querySelector("#next-turn").textContent = "X's turn"
        }
    }
}

function setSquare() {
    if (gameStart) {
        return;
    }
    let position = this.id.split("-") //splits the id to an array
    let i = parseInt(position[0]);
    let j = parseInt(position[1]);

    if (board[i][j] != ' ') { //prevents clicking on the same square
        return;
    }

    board[i][j] = currentPlayer; //updates js board state
    this.innerText = currentPlayer; //updates html board state

    if (currentPlayer == playerX) { //changes players
        currentPlayer = playerO;
        document.querySelector("#next-turn").textContent = currentPlayer   "'s turn";
    } else {
        currentPlayer = playerX;
        document.querySelector("#next-turn").textContent = currentPlayer   "'s turn";
    }

    checkWinner();

}

const restartBtn = document.querySelector("#restart-btn");
var container = document.querySelector("#board");
var square = document.querySelector(".square");

restartBtn.addEventListener('click', resetGame);

function resetGame () {
    window.location.reload();
}

CodePudding user response：

you need to make board variable as a global variable then create a js function named as a restart and in that function adjust the board data like

board =[]
function restart() { 

  board = [
        [' ', ' ', ' '],
        [' ', ' ', ' '],
        [' ', ' ', ' ']
    ]
}

<button onclick="restart()">restart</button>

you can create a button for restart and call a function restart on that button click.

I hope this will work for you :)