Set div to hidden, then visible after time delay

Question

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 1

Firstly your syntax is missing a } . Secondly, to follow best practice you should provide setTimeout with a function reference. Your current code which actually be run through 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> 

Answer 2

setTimeout() Syntax

The setTimeout() function actually expects a function to be passed to it as opposed to a string :

setTimeout(function(){
   document.getElementById('yellow').style.visibility = 'visible'; 
}, 2000);

Additionally, instead of hiding it through Javascript, you might consider just applying a CSS style to handle it being hidden by default (ie display: none ) and then simply showing it within the body of your setTimeout() function call.

Example

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

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

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

Answer 3

Try This

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