l-emi l-emi - 2 months ago 8
CSS Question

Disabling divs after they've been clicked

I have a Tic Tac Toe game and I'd like to stop the player being able to "overwrite" cells that have already been taken. Here's the game.

I tried using this:

function stopClick() {
if (document.getElementsByClassName("pos").innerHTML !== "") {
$(this).disabled = "disabled";
}
}


And a multitude of other similar functions but nothing works. Any ideas? Thank you!

Answer

I edited your game and a working version can be found here: https://jsfiddle.net/f1apoya1/7/

Basically add a class:

.already-played {
  pointer-events: none;
}

and to your updateButtons function:

function updateButtons() {
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            $("#c" + i + "" + j).text(board[i][j] == false ? "x" : board[i][j] == true ? "o" : "");
            if (board[i][j]) {
                $("#c" + i + "" + j).addClass('already-played');
            }
        }
    }
}