Javascript clock not running in real time

Question

I have made a simple clock using html,css and javascript but upon loading the page using the live server extension it is showing the correct time but is not changing the time by the second but the time does change upon reloading the page.

My Code

const d=new Date();

function time(){
    let h=document.getElementById('hour');
    let ho=d.getHours();
    
    let m=document.getElementById('min');
    let mi=d.getMinutes();
    
    let s=document.getElementById('sec');
    let se=d.getSeconds();
    
    h.innerHTML=ho;
    m.innerHTML=mi;
    s.innerHTML=se;
    
   setTimeout(time, 1000);
}

time();

Answer 1

First you are using timeout and i guess you want an Interval, check for the difference.

And second, you are only getting once the indstance Date(), so you only know at first time the run. My approach will be this:

let h=document.getElementById('hour');
let m=document.getElementById('min');
let s=document.getElementById('sec');

function time(){

    const d=new Date();
    
    let ho=d.getHours();        
    let mi=d.getMinutes();    
    let se=d.getSeconds();
    
    h.innerHTML=ho;
    m.innerHTML=mi;
    s.innerHTML=se;
}

const myClock = setInterval(time, 1000);

//clearInterval(myClock);

Answer 2

It is because you're only setting the time once, at the first row. If you're only interested in fixing the error, simply move "const d=new Date();" so that it is inside your time() function. But here is another example on how to do it, this in AM and PM format to give you some ideas in general around this topic. Notice the setTimeout that runs the function currentTime() with a new Date() inside of it each second. Source is https://flexiple.com/javascript-clock/

 function currentTime() { let date = new Date(); let hh = date.getHours(); let mm = date.getMinutes(); let ss = date.getSeconds(); let session = "AM"; if(hh == 0){ hh = 12; } if(hh > 12){ hh = hh - 12; session = "PM"; } hh = (hh < 10)? "0" + hh: hh; mm = (mm < 10)? "0" + mm: mm; ss = (ss < 10)? "0" + ss: ss; let time = hh + ":" + mm + ":" + ss + " " + session; document.getElementById("clock").innerText = time; let t = setTimeout(function(){ currentTime() }, 1000); } currentTime();

 body { font-family: system-ui; background: #f06d06; color: white; text-align: center; }

 <div id = "clock" onload="currentTime()"></div>

Answer 3

1. Cache your elements up front so you're always accessing the DOM for each of them in the function.

2. Move the creation of the new date into the function.

3. Maybe use textContent instead of innerHTML as it is just text you're adding.

Edit: I added a little padding function that prefixes a zero to any number that only has one digit.

 const hour = document.getElementById('hour'); const minutes = document.getElementById('minutes'); const seconds = document.getElementById('seconds'); function pad(n) { return String(n).length === 1? `0${n}`: n; } function time() { const d = new Date(); hour.textContent = pad(d.getHours()); minutes.textContent = pad(d.getMinutes()); seconds.textContent = pad(d.getSeconds()); setTimeout(time, 1000); } time();

 .container { font-size: 2em; }

 <div class="container"> <span id="hour"></span>: <span id="minutes"></span>: <span id="seconds"></span> </div>

Additional documentation

• Template/string literals