Set div to hidden, then visible after time delay

I’m trying to have a yellow square appear on a black background after X amount of time (perhaps even after a random amount of time, but for now let’s just do fixed time).

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.visibility = 'hidden';
    setTimeout("document.getElementById('yellow').style.visibility = 'visible'", 2000);
  }

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

This code should hide the yellow square initially, then reveal it after 2 seconds. But it does not work. It also does not work when I try to use a button to initiate the javascript function. I’ve looked at other examples and compared my code to theirs and it seems like it should work!

https://jsfiddle.net/xxPoLyGLoTxx/51spg8d1/

Answer

Firstly your syntax is missing a }. Secondly, to follow best practice you should provide setTimeout with a function reference. Your current code will be invoked via eval() which should be avoided at all costs. Thirdly, you need to use backgroundColor, not color, to set the element background. Lastly, you don’t call intitialSetup() anywhere. With those issues in mind, try this:

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.backgroundColor = 'black';
    setTimeout(function() {
      document.getElementById('yellow').style.backgroundColor = 'yellow'
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

Note that with this logic you’re not making the yellow div hidden – as your title implies. It’s only not immediately obvious as you’ve changed its background colour to match the black background of the body. If you want to make the element completely invisible, use the display property. You can also set it in CSS to avoid a FOUC when the page loads:

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    setTimeout(function() {
      document.getElementById('yellow').style.display = 'block';
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

Finally, here’s a jQuery implementation of the above as you’ve tagged the question as such:

$(function() {
  setTimeout(function() {
    $('#yellow').show()
  }, 2000);
});

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yellow" class="box yellow"></div>