CODEWITHSUNDEEP
javascript
Rob
Rob

Reputation:

Why isn't my JavaScript countdown function doing anything?

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 I'm trying to call it with:

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

but nothing happens. What am I doing wrong? I have JavasScript enabled but nothing happens after I click the button.

Upvotes: 1

Views: 878

Answers (3)

Matt Nalett
Matt Nalett

Reputation: 11

I fixed the code you posted by putting the input type inside the div tags so it removes "download" button once you click it and the timer starts.

<div id="dl">
  <input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" />
</div>
<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="File or Page Location">Download File</a>';
           clearInterval(timer);
        }
    }
</script>

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20431

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.

Upvotes: 0

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 828170

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.

Upvotes: 0

Related Questions