Executing JavaScript after X seconds

I am building a interstitial page, using <div> and JavaScript, really simple script but neat.

Everything is working, but I also would like to close the div's after a few seconds (like 10 seconds, for example). Here what I have so far:

• I have two div's, 1 and 2.
• I have the CSS setup for div 1 like: display: none; (div 1 have the content for the splash screen)
• Div 2 is the layer that will cover the page and leave only div 1 visible.

To load the div's I have a onload function like this:

onload="document.getElementById('div1').style.display='block';document.getElementById('div2').style.display='block'"

To hide the divs I have an onclick function like this:

<a href = "javascript:void(0)" onclick = "document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'"></a>

How can I execute the onclick function with a timer, and how can I do it? It also has to be in JavaScript.

I believe you are looking for the setTimeout function.

To make your code a little neater, define a separate function for onclick in a <script> block:

function myClick() {
  setTimeout(
    function() {
      document.getElementById('div1').style.display='none';
      document.getElementById('div2').style.display='none';
    }, 5000);
}

then call your function from onclick

onclick="myClick();"

setTimeout will help you to execute any JavaScript code based on the time you set.

Syntax

setTimeout(code, millisec, lang)

Usage,

setTimeout("function1()", 1000);

For more details, see http://www.w3schools.com/jsref/met_win_settimeout.asp

onclick = "setTimeout(function() { document.getElementById('div1').style.display='none';document.getElementById('div2').style.display='none'}, 1000)"

Change 1000 to the number of milliseconds you want to delay.