CODEWITHSUNDEEP
javascriptcountdown
Sobiaholic
Sobiaholic

Reputation: 2967

JavaScript Countdown Timer not starting [Code Included]

I'm trying to make a countdown timer using JS, obviously.

I think my code is correct, but it does not work.

Objective of the code: The code suppose to show a timer decreasing until it show the content which is DONE in the alst line of the code.

Problem: I've tried making an HTML page on my local machine and tested it but it didn't work, also I've uploaded it on my website and it does not work too.

Code:

<body>

<div 
         id="JSPractice5" 
          style="border-style:dotted; 
          padding:10px; 
          font-size:24px; 
          width:200px; 
          text-align:center;">
Countdown Starting
</div>

<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
var timerID = setInterval("CountdownTimer()",1000);
function CountdownTimer() {
if(number > 1) {
    number--;
    ReplaceContentInContainer(containerID,number); //Mark1
    }
else {
    clearInterval(timerID);
    ReplaceContentInContainer(containerID,'DONE!!');
    }
}
   </script>
</body>

If the solution of the problem is easy/stupid and you thought of down voting it, please don't do, because I'm very new to SOF and JS :)

Thanks in Advance guys.

Upvotes: 0

Views: 386

Answers (3)

Ray Toal
Ray Toal

Reputation: 88468

Redo your setInterval call to specify the function itself, rather than a string containing a call.

See http://jsfiddle.net/2zwbV/2/ for a working example.

Upvotes: 1

V.Rashkov
V.Rashkov

Reputation: 1735

<body>

<div 
         id="JSPractice5" 
          style="border-style:dotted; 
          padding:10px; 
          font-size:24px; 
          width:200px; 
          text-align:center;">
Countdown Starting
</div>

<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;

function CountdownTimer() {
if(number > 1) {
    number--;
    ReplaceContentInContainer(containerID,number);
    }
else {
    clearInterval(timerID);
    ReplaceContentInContainer(containerID,'DONE!!');
    }
}
var timerID = setInterval(CountdownTimer(),1000);
   </script>

</body>

First, the timerID should be after CountdownTimer function because if not you are going to call a non existing function, second is that the function CountdownTimer should't be in quotes.

Upvotes: -1

stealthyninja
stealthyninja

Reputation: 10371

You're missing

function ReplaceContentInContainer(id, content)
{
    document.getElementById(id).innerHTML = content;
}

Upvotes: 2

Related Questions