How to make style change happen before prompt

Question

I'm writing a game that lets 2 players take turns playing. After a player makes a viable move, the blank element covers the whole screen and a prompt would then appear to ask if they should proceed to the next turn. The blank element will be removed to show the game after OK is clicked on prompt.

However, the prompt would appear right after the viable move was made instead of after the style change. So the blank cover would never appear on screen if the user clicks OK. The only way for the style change to happen is if the user clicks cancel on the prompt.

Is there some way to make the prompt happen after a style change?

Just an example code

var nextTurn;
cover.style.visibility='hidden';
function displaySwitch(){
     if(turn == 0){
          cover.style.visibility='visible';
          nextTurn = confirm("Click OK for next turn");
          if(nextTurn == true){
               cover.style.visibility='hidden';
               turn++;
          }
     }else if(turn == 1){
          cover.style.visibility='visible';
          nextTurn = confirm("Click OK for next turn");
          if(nextTurn == true){
               cover.style.visibility='hidden';
               turn--;
          }
     }
}

Answer 1

Use setTimeout with at least 50ms.
And you better use confirm instead of prompt because prompt returns an input value.

 if (turn == 0) {
      cover.style.visibility = 'visible';
      setTimeout(function() {
        nextTurn = confirm("Click OK for next turn");
        if (nextTurn == true) {
          cover.style.visibility = 'hidden';
          turn++;
        }
      }, 50);
    } else if (turn == 1) {
      cover.style.visibility = 'visible'
      setTimeout(function() {
        nextTurn = confirm("Click OK for next turn");
        if (nextTurn == true) {
          cover.style.visibility = 'hidden';
          turn--;
        }
      }, 50);
    }