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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<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>

<!-- end snippet -->

It's less about whether the box can be clicked but more that nothing should happen if a box is clicked more than once. If you use classes you can check to see if a button has an "active" class (for example), and if it doesn't add an "active" class to it. If the code does have an active class nothing happens.

In this example I'm just adding a background colour to a boxes when it's clicked. But you can use this to implement your TTT logic.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Grab the grid
const grid = document.querySelector('.grid');

// Attach an event listener to it.
// This allows us to use event delegation to catch
// events from its children as they "bubble up" the DOM
grid.addEventListener('click', handleClick);

function handleClick(e) {

  const el = e.target;

  // If it's an element with a box class
  if (el.matches('.box')) {
    
    // If the element doesn't have an active class add one
    // otherwise do nothing
    if (!el.classList.contains('active')) {
      el.classList.add('active');
    }

  }

}

<!-- language: lang-css -->

.grid { display: grid; grid-template-columns: 1fr 50px; width: 102px; gap: 2px; }
.box { width: 50px; aspect-ratio: 1; background-color: #efefef; border: 1px solid #666; }
.box:hover:not(.active) { cursor: pointer; background-color: lightblue; }
.active { background-color: lightskyblue; }

<!-- language: lang-html -->

<section class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

<!-- end snippet -->

Additional documentation

• classList

• matches

• Event delegation