A Simple Countdown with for loop

Question

Hi I'm trying to create a simple countdown.
Here is my code but it's not working.
Can you help me find the problem?

function count() {
    for (var cc=20,cc > 0,cc--) {
        document.getElementById("cco").innerHTML=cc;
    }
}
count();

What is the problem? from what I see it can be either you lack a sleep of some sort or you have no element with `id="coo"`, or the `,` instead of `;` typo in the for loop. — Ofir Farchy, Jan 18 '13 at 13:21
The problem is his comma's instead of semi-colons in the for argument. Otherwise you are right, in this manner (without a 'sleep/pauze' like a recursive setInterval(f,t), the element cco will only have 0 visible. — GitaarLAB, Jan 18 '13 at 13:22
@OfirFarchy, what JavaScript version are you using that it has sleep? ;) — epascarello, Jan 18 '13 at 13:23

James McLaughlin · Accepted Answer · 2013-01-18T13:27:50.720

10

You're using commas instead of semicolons.

for (var cc=20,cc > 0,cc--)

should be

for (var cc=20;cc > 0;cc--)

However, this probably won't do what you think it will, as the loop will count all the way to 0 immediately (so the user won't even see the countdown). I'm guessing you wanted something like:

var cc = 20;

var interval = setInterval(function()
{
    document.getElementById("cco").innerHTML = -- cc;

    if (cc == 0)
        clearInterval(interval);

}, 1000);

See setInterval and clearInterval for more information.

edited Jan 18 '13 at 13:27

answered Jan 18 '13 at 13:20

James McLaughlin

18,774
3
47
56

1

Looks like you need to add a `clearInterval` in case `cc` is `0`. – VisioN Jan 18 '13 at 13:23
Or you could use a recursive `setTimeout` that stops setting when `cc` is `0`. – mellamokb Jan 18 '13 at 13:23
1

Yes, you're right - admittedly, I didn't test the code. Thanks! – James McLaughlin Jan 18 '13 at 13:24
1

@mellamokb Although in this situation it probably doesn't matter, I find `setInterval` is more precise with the interval than a recursive `setTimeout`. There's a good description of the difference [here](http://stackoverflow.com/a/731625/712294). – James McLaughlin Jan 18 '13 at 13:29

score 4 · Answer 2 · answered Jan 18 '13 at 13:24

There are (at least) two mistakes.

The first is syntactical: In a for loop the parameters are separated by ; and not by ,. Syntactic correct code would look like this:

function count() {
  for (var cc=20;cc > 0;cc--) {
    document.getElementById("cco").innerHTML=cc;
 }
}

Second, you do not have a countdown, but override the very same element over and over again, without any time for the user to see the result.

A better approach would be to use setTimeout() here, which could look like this:

var cc = 20;
function count() {
  document.getElementById("cco").innerHTML=cc;
  if ( cc > 0 ) {
    setTimeout( count, 1000 );
  }
}

setTimeout( count, 1000 );

The setTimeout() approach leaves some time for the browser to actually render your modifications (and for the user to see it).

+1 I prefer `setTimeout`. It's like using a [Thorium nuclear reactor](http://en.wikipedia.org/wiki/Thorium-based_nuclear_power) instead of a Uranium one. — mellamokb, Jan 18 '13 at 13:26

score 1 · Answer 3 · answered Jan 18 '13 at 13:20

1

Change ',' with ';' in your for loop

function count() {
  for (var cc=20;cc > 0;cc--) {
    document.getElementById("cco").innerHTML=cc
  }
}
count();

answered Jan 18 '13 at 13:20

JohnJohnGa

15,076
17
60
86

score 1 · Answer 4 · answered Jan 18 '13 at 13:27

1

Another recursive version with setTimeout:

(function count(cc) {
  document.getElementById("cco").innerHTML = cc;
  if (cc > 0)
    setTimeout(function() { count(--cc); }, 1000);
})(10);

DEMO: http://jsfiddle.net/DgWgx/

answered Jan 18 '13 at 13:27

VisioN

138,460
30
271
271

score 1 · Answer 5 · answered Jun 07 '17 at 13:24

When making countdown make sure that start and end elements are correct.

Count up:

for (var x=0;x < 10;x++) console.log(x);

goes from 0 to 9

Incorrect countdown:

for (var x=10;x > 0;x--) console.log(x);

goes from 10 to 1

Correct countdown:

for (var x=10-1;x >= 0;x--) console.log(x);

goes from 9 to 0

A Simple Countdown with for loop

5 Answers5