CODEWITHSUNDEEP
javascripthtmldom
3802400
3802400

Reputation: 57

How to hide elements between turns of a game in javascript?

I have a basic javascript/html boardgame to be played by two players on one screen. When player1 finishes their turn, I want their board to be hidden, and an alert to pop up asking player2 if they are ready to take their turn. Then player2's board becomes visible. I have tried a bunch of things and can't get it to work.

var hide = false;
displayBoard(player1);

function displayBoard(player){

for (i = 0; i < boardSize + 1; i++) {
    for (j = 0; j < boardSize + 1; j++) {

        var gameSquare = document.createElement("div");
        var squareText = document.createElement("span");
        squareText.textContent = boardArray[j][i];


        if(hide){
            gameSquare.style.visibility = 'hidden';
            squareText.style.visibility = 'hidden';
        }

        gameSquare.appendChild(squareText)
        boardContainer.appendChild(gameSquare);

        var topPosition = j * squareSize;
        var leftPosition = i * squareSize;          

        gameSquare.style.top = topPosition + 'px';
        gameSquare.style.left = leftPosition + 'px';
    }
}
function fire(){ //This happens when a player clicks on the board

    event = event || window.event;
    var source = event.target || event.srcElement;
    //a bunch of game logic, changing up arrays

    //end of player's turn
    hide = true; //I want to hide the board until the next player starts
    displayBoard(thisPlayer); //To update the board being hidden
    window.alert("press okay to begin " + nextPlayer + "'s turn");
    hide = false;
    displayBoard(nextPlayer);
}

When I do this, the visibility doesn't change in the html DOM.

I have also tried setting the visibility to hidden in the fire() function, which didn't work. I've tried setting all children of the boardContainer to hidden. I've tried doing all of these before, during, and after the bulk of the displayBoard function. I've tried disabling the cache. I've tried setting display to none. I've tried adding waiting periods after displayBoard().

What is the correct way to do this?

I'm also not allowed to use JQuery for this FYI.

Edit: instead of iterating through the elements I added this to the beginning of displayBoard():

 if (hide){
    boardContainer.style.visibility = "hidden";
    opposingBoardContainer.style.visibility = "hidden";
} else{
    boardContainer.style.visibility = "visible";
    opposingBoardContainer.style.visibility = "visible";
}

The result of this is that if I eliminate the else block, the board disappears after the end of the first turn. If I leave the else block in, no change seems to happen. So I suspect that it is disappearing and coming back too quickly for me to tell instead of disappearing and waiting for the alert window like I want it to. Any thoughts?

Upvotes: 0

Views: 409

Answers (1)

Koborl
Koborl

Reputation: 235

The result of this is that if I eliminate the else block, the board disappears after the end of the first turn. If I leave the else block in, no change seems to happen. So I suspect that it is disappearing and coming back too quickly for me to tell instead of disappearing and waiting for the alert window like I want it to. Any thoughts?

hide = true; //I want to hide the board until the next player starts
displayBoard(thisPlayer); //To update the board being hidden
window.alert("press okay to begin " + nextPlayer + "'s turn");
hide = false;
displayBoard(nextPlayer);

So basically what is going on here is when you call alert the DOM has not yet rendered again, so your board is still there when the alert fires and blocks the rest of the code from executing.

So when you click okay two things may be happening.

  1. It renders the board invisible and then executes displayBoard which renders it visible immediately again.
  2. It executes displayBoard again before rendering and then when it next renders it will be visible so nothing happens.

Either way you are going to need to change the way you handle turns so that it doesn't rely on alert to block execution.

Upvotes: 1

Related Questions