Leading Zero in my digital clock

Question

Hi I am building a digital clock and i want it to look nicer by adding a leading zero, but i cant seem to make it work somebody who can give me a tip?

I have tried if(hour < 10) { hour = "0" + hour;}

But that didnt work

const DATE = new Date();
var monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday", "Sunday"];
console.log(DATE);

document.getElementById('year').innerHTML = DATE.getFullYear();
document.getElementById('month').innerHTML = monthNames[DATE.getMonth()];
document.getElementById('date').innerHTML = DATE.getDate();
document.getElementById('day').innerHTML = dayNames[DATE.getDay() - 1];

var hour = document.getElementById('hour').innerHTML = DATE.getHours();
var min = document.getElementById('minute').innerHTML = DATE.getMinutes();
var sec = document.getElementById('second').innerHTML = DATE.getSeconds();

var theTime = document.getElementById('time').innerHTML = hour + " : " + min + " : " + sec;

My HTML looks like this

<div id="myClock">
    <div id="period">
    <span id="year"></span>
        <span id="month"></span>
        <span id="date"></span>
        <span id="day"></span>
    </div>
    <div id="time">
        <span id="hour"></span>
        <span id="minute"></span>
        <span id="second"></span>
    </div>
</div>
<br>
<form>
    <input type="date" class="unstyled">
    <input type="time">
</form>
<div id="alarmBox">
    <div class="box">
        <h1>alarm</h1>
    </div>
</div>

Answer 1

I think the code below would work as your solution. I padded the hour and the min variable because you would run into the same issue for both variables.

The Date functions you called to set the variables have a return type of number . Your code was adding 0 to a number, which basically does nothing. You want to concatenate a string, so just make sure your variable is a string first.

 const DATE = new Date(); var monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var dayNames = ["Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday", "Sunday"]; console.log(DATE); document.getElementById('year').innerHTML = DATE.getFullYear(); document.getElementById('month').innerHTML = monthNames[DATE.getMonth()]; document.getElementById('date').innerHTML = DATE.getDate(); document.getElementById('day').innerHTML = dayNames[DATE.getDay() - 1]; var hour = document.getElementById('hour').innerHTML = DATE.getHours(); var min = document.getElementById('minute').innerHTML = DATE.getMinutes(); var sec = document.getElementById('second').innerHTML = DATE.getSeconds(); //change the vars types to string and check if it's 1 or 2 digits hour = hour.toString() if (hour.length < 2) { //prepend a 0 to the string to pad if necessary hour = '0' + hour; } min = min.toString() if (min.length < 2) { //prepend a 0 to the string to pad if necessary min = '0' + min; } var theTime = document.getElementById('time').innerHTML = hour + " : " + min + " : " + sec;

 <div id="myClock"> <div id="period"> <span id="year"></span> <span id="month"></span> <span id="date"></span> <span id="day"></span> </div> <div id="time"> <span id="hour"></span> <span id="minute"></span> <span id="second"></span> </div> </div> <br> <form> <input type="date" class="unstyled"> <input type="time"> </form> <div id="alarmBox"> <div class="box"> <h1>alarm</h1> </div> </div>