JavaScript countdown

Question

i found this script:

<script language="Javascript" TYPE="text/javascript">
var container = document.getElementById('dl');
var seconds = 10;
var timer;
function countdown() {
    seconds--;
    if(seconds > 0) {
       container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..';
    } else {
       container.innerHTML = '<a href="download.php">Download</a>';
       clearInterval(timer);
  }
}
timer = setInterval(countdown, 1000);
</script>

and im trying to call it with:

<input type="button" onclick="countdown()" id="dl" value="Download" />

but nothing happens, whats wrong? I have javascript enabled but nothing happens.

Answer 1

The script is starting itself with the setInterval function call, and is assigning the countdown to the element with the innerHTML property.

If you want to show that in the button, you should use the value property of the element and change the behaviour (i.e.: the link will not work there) or use a span or div element instead the button.

Answer 2

Couple of things. First off, if the script is declared before your html, you are probably getting an error on the getElementById call since that element has not been rendered yet. When accessing dom elements, you have to do so after the dom is loaded, or (preferrably) by running your script in a function bound to the document's onload event.

Your other issue is that your call to setInterval kicks the countdown off immediately as soon as that code is evaluated, whereas you don't want it to start until button click. Try this instead:

<div id="dl"></div>
<input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" />

<script language="Javascript" TYPE="text/javascript">
var container = document.getElementById('dl');
var seconds = 10;
var timer;
function countdown() {
    seconds--;
    if(seconds > 0) {
       container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..';
    } else {
       container.innerHTML = '<a href="download.php">Download</a>';
       clearInterval(timer);
  }
}
</script>

Note that this is not great code, but given the lack of detail about your page or what else you are doing, this should at least get you going.