Digital clock in Javascript

Question

The code is for making a digital clock, what's the use of putting a setTimeout function in the showTime function and what is the use of setting both the textcontent and Innertext

 function showTime(){ var date = new Date(); var h = date.getHours();// 0 - 23 var m = date.getMinutes(); // 0 - 59 var s = date.getSeconds(); // 0 - 59 var session = "AM"; if(h == 0){ h = 12; } if(h > 12){ h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; document.getElementById("MyClockDisplay").innerText = time; document.getElementById("MyClockDisplay").textContent = time; setTimeout(showTime, 1000); } showTime(); 

 <div id="MyClockDisplay" class="clock"></div> 

Answer 1

You need to call setTimeout at the bottom of showTime so that each call of showTime will queue up the function to run again in 1 second - which, when run, will queue the function again after another second, and so on. Having a function recursively call itself with setTimeout is an alternative to using setInterval .

textContent is generally preferable over innerText - see The poor, misunderstood innerText , though if you're just assigning rather than getting, it doesn't matter much. innerHTML isn't appropriate here because you're assigning text , not HTML markup .

Using setInterval rather than a recursive setTimeout would look like this, accomplishing the exact same thing:

 function showTime() { var date = new Date(); var h = date.getHours(); // 0 - 23 var m = date.getMinutes(); // 0 - 59 var s = date.getSeconds(); // 0 - 59 var session = "AM"; if (h == 0) { h = 12; } if (h > 12) { h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; document.getElementById("MyClockDisplay").innerText = time; document.getElementById("MyClockDisplay").textContent = time; } showTime(); setInterval(showTime, 1000); 

 <div id="MyClockDisplay" class="clock"></div> 

Answer 2

The use of the setTimeout is to set next count down for next second.

The use of Innertext is to set the time string to the element .

Innertext and textcontent are the same here.

Maybe you can try SetInterval as below to be more accurate:

function showTime(){
    var date = new Date();
    var h = date.getHours();// 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";

    if(h == 0){
        h = 12;
    }

    if(h > 12){
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;

}

showTime(); 
setInterval(showTime, 1000);