Question 49888 in Javascript Question posted in
A very good W3school tutorial can be found here.

grid not allowed to be clicked twice – Javascript

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    // 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');
    }

  }

}
    .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; }
    <section class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

    Additional documentation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search