How to fix javascript countdown seconds bug

Question

so I have this countdown timer I created,

<script type="text/javascript">
var interval;
    var minutes = 12;
    var seconds = 32;
    window.onload = function() {
        countdown('countdown');
}

function countdown(element) {
    interval = setInterval(function() {
        var el = document.getElementById(element);
        if(seconds == 0) {
            if(minutes == 0) {               
                minutes=7;
seconds=47;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ':' : ':');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ?'':'';
            el.innerHTML = minute_text + ''+seconds + ' '+second_text + ' remaining';
            seconds--;
        }, 1000);

}
</script>

The result works perfectly, but when the timer reaches digits below 10, (12:03, 12:05, etc.) it displays the seconds without a '0' in the front. (12:3 instead of 12:03)

I tried fixing this, but it has brought me nowhere. Is it possible to somehow edit my script to fix this bug?

possible duplicate of [How can I create a Zerofilled value using JavaScript?](http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript) — sachleen, Dec 27 '12 at 20:00

score 1 · Answer 1 · edited Dec 27 '12 at 20:06

1

A number does not have a zero in front of it.

You have to manually add that.

if(seconds < 10) {
    second_text = "0" + seconds;
}

edited Dec 27 '12 at 20:06

sachleen

30,730
8
78
73

answered Dec 27 '12 at 20:00

Naftali

144,921
39
244
303

I know, but I have no idea where to add that line of code. I tried adding "0" between the line which combines the minutes and the seconds, but it doesn't work. – Mike Anderson Dec 27 '12 at 20:01
You should never use parseInt like that. – Andreas Louv Dec 27 '12 at 20:04
@Neal btw you don't need to call parseInt on `second_text` because you already have access to `seconds`. – sachleen Dec 27 '12 at 20:05
@sachleen lol I was under the impression that seconds was a total. not a real number. updating. – Naftali Dec 27 '12 at 20:06
1

@Neal https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/parseInt#Octal_Interpretations_with_No_Radix – Andreas Louv Dec 27 '12 at 20:08

score 1 · Accepted Answer · answered Dec 27 '12 at 20:01

1

second_text = (seconds > 9) ? (seconds) : ('0' + seconds);

answered Dec 27 '12 at 20:01

John Doe

173
10

s = seconds, i copied it from a countdown-script i wrote :) – John Doe Dec 27 '12 at 20:02
I understood that, but OP might not. +1 for easiest answer. – sachleen Dec 27 '12 at 20:03

score 1 · Answer 3 · answered Dec 27 '12 at 20:03

I just cleaned your code a bit:

var interval,
    minutes = 12,
    seconds = 32;

window.onload = function() {
    countdown('countdown');
}

function countdown(element) {
    var el = document.getElementById(element),
        minutes_text, second_text;

    interval = setInterval(function() {
        if(seconds == 0) {
            if(minutes == 0) {
                minutes=7;
                seconds=47;
            }
            else {
                minutes--;
                seconds = 60;
            }
        }

        minutes_text = minutes;
        second_text = (seconds < 10 ? "0" : "") + seconds;

        el.innerHTML = minutes_text + ':' + second_text + ' remaining';
        seconds--;
    }, 1000);
}

score 0 · Answer 4 · answered Dec 27 '12 at 20:02

0

try adding a function to pad the value displayed

function padvalue(i) {
    if (i<10) {
        i="0" + String(i);
    }
    return i;
}

Call it here

el.innerHTML = minute_text + '' + padvalue(seconds) + ' ' + second_text + ' remaining';

answered Dec 27 '12 at 20:02

vortextangent

561
4
16

score 0 · Answer 5 · answered Dec 27 '12 at 20:03

Use this snippet to convert the numbers to strings:

var secondStr = seconds + "";
while (secondStr.length < 2) {
    secondStr = "0" + secondStr;
}

Do the same thing for minutes and hours and then print the strings.

(You do know that doing an interval of 1000 means the interval will be 1000 or more milliseconds? It's unlikely that you miss a whole tick though with that long of an interval. This means the counter will be close to real time seconds but not exact and will vary from time to time and computer to computer.)

How to fix javascript countdown seconds bug

5 Answers5