Adding zeros in a digital clock

Question

I have researched for an hour now on how to do add the zeros whenever hours, minutes or seconds are less 10, to make them, for example, "05 hours", and not just "5 hours".

I have tried if (hours < 10) { hours = "0" + hours } and I've seen it work in a couple of websites, but it doesn't seem to work in my code.

How can I make this work?

 function clock() { //Clock variables var today = new Date(); var hours = today.getHours(); var minutes = today.getMinutes(); var seconds = today.getSeconds(); var date1 = [hours, minutes, seconds]; var actualDate = date1.join(":"); //Adding zeros, but it doesn't work. if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } //text document.getElementById("hey").innerHTML = actualDate; //Repeat every 1000ms (1 second) setTimeout(clock, 1000); }; clock(); 

 <h1 id="hey"></h1> 

Answer 1

That is because you need to calculate date1 and actualdate after prepending zeroes on the values.

 function clock() { //Clock variables var today = new Date(); var hours = today.getHours(); var minutes = today.getMinutes(); var seconds = today.getSeconds(); //Adding zeros, but it doesn't work. if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } var date1 = [hours, minutes, seconds]; var actualDate = date1.join(":"); //text document.getElementById("hey").innerHTML = actualDate; //Repeat every 1000ms (1 second) setTimeout(clock, 1000); }; clock(); 

 <h1 id="hey"></h1> 

I would suggest you to use padStart of ES8 to do this task.

 var x = "5"; console.log(x.padStart(2, "0")); 

Answer 2

Better use this pad function :

function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

in node :

> function pad(num, size) {
...     var s = num+"";
...     while (s.length < size) s = "0" + s;
...     return s;
... }
> pad(1, 2)
'01'
> pad(11, 2)
'11'
> 

Answer 3

if (seconds < 10) { seconds = "0" + seconds; } if (seconds < 10) { seconds = "0" + seconds; } this will just add the number 0 to the number of seconds. So you have to make your numbers a string:

 function clock() { //Clock variables var today = new Date(); var hours = today.getHours().toString(); var minutes = today.getMinutes().toString(); var seconds = today.getSeconds().toString(); //Adding zeros, but it doesn't work. if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } var date1 = [hours, minutes, seconds]; var actualDate = date1.join(":"); //text document.getElementById("hey").innerHTML = actualDate; //Repeat every 1000ms (1 second) setTimeout(clock, 1000); }; clock(); 

 <h1 id="hey"></h1>