grid not allowed to be clicked twice

Question

I have a grid called "gridbox" and the item "box1" should not be allowed to get clicked a 2nd time. Its for my Tik Tak Toe game.

In the function check(), it should prevent the box from getting clicked a 2nd time.

<section class="gridbox">
    <div class="box1" onclick="check()"></div>
</section>

Answer 1

Welcome to Stack Overflow!

Without the rest of your code I don't know exactly how you're storing the state of each cell on the Tic Tac Toe board so I used an array to represent it.

We'll create a variable called boardState to represent the X,O state of each cell on the board:

// board state will contain the current state of each cell
// of the tic tac toe board. '','X', 'O', where '' indicates
// an empty cell
//
// This line is basically creating an array of 9 elements (one for each cell)
// and setting each to ''.
var boardState = Array(9).fill('')

Your check function will look something like this:

// our check function will check whether or not the cell can have the marker placed
function check(target, i) {
    if (boardState[i] === '') { // if the cell is empty
        boardState[i] = currentTurn // update boardState
        target.innerHTML = currentTurn // fill <div> with value

        // switch to other person's turn
        if (currentTurn === 'X') {
            currentTurn = 'O'
        } else {
            currentTurn = 'X'
        }
    }
}

This function takes 2 arguments,

• target: The element that was clicked
• i: The index of the cell that was clicked

Now, when calling the check function on your onclick event, you can pass the target and index of each, with each div on the board having an increasing index. I've created 3 divs here that show what I'm talking about:

<section class="gridbox">
    <div class="box1" onclick="check(this, 0)"></div>
    <div class="box1" onclick="check(this, 1)"></div>
    <div class="box1" onclick="check(this, 2)"></div>
</section>

Now when you click on the div it'll fill in the value only if it's already empty - otherwise, nothing will happen.

Here's the full code to get a basic working example for 3 boxes:

<style>
    div.box1 {
        width: 100px;
        height: 100px;
        border: solid 1px black;

        /* This part is to center the text */
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<script>
    // board state will contain the current state of each cell
    // of the tic tac toe board. '','X', 'O', where '' indicates
    // an empty cell
    //
    // This line is basically creating an array of 9 elements (one for each cell)
    // and setting each to ''.
    var boardState = Array(9).fill('')

    var currentTurn = 'X'

    // our check function will check whether or not the cell can have the marker placed
    function check(target, i) {
        if (boardState[i] === '') { // if the cell is empty
            boardState[i] = currentTurn
            target.innerHTML = currentTurn

            if (currentTurn === 'X') {
                currentTurn = 'O'
            } else {
                currentTurn = 'X'
            }
        }
    }
</script>

<section class="gridbox">
    <div class="box1" onclick="check(this, 0)"></div>
    <div class="box1" onclick="check(this, 1)"></div>
    <div class="box1" onclick="check(this, 2)"></div>
</section>