Digital Clock on JavaScript not updating every seconds

Question

I am trying to create a digital clock using JavaScript and I am running into some problem. The digital clock does show up and the time is correct. However, it does not update every seconds, though the setinterval seems to be correct.

window.onload = pageLoad;
    function pageLoad(){

    var hours = document.getElementById("hoursOut");
    var mins = document.getElementById("minsOut");
    var secs = document.getElementById("secsOut");


    var dateVar = new Date();
    var currentHours = dateVar.getHours();
    var currentMinutes = dateVar.getMinutes();
    var currentSeconds = dateVar.getSeconds();
    var tiktok;

    
    function displayTime() {
        hours.innerHTML = currentHours + ":";
        mins.innerHTML = currentMinutes + ":";
        secs.innerHTML = currentSeconds;
    }   



    function startClock(){
        displayTime();
        tiktok = setInterval(displayTime,1000);
    }

    
    }
    ```

Answer 1

You have to refactor your code to be like below.

function startClock() {
  displayTime(); // Defined in your example
  setInterval(displayTime, 1000);
};

startClock();

Answer 2

Your code needs a few changes. Just replace your code to the one below.

function startClock() {
  displayTime();
  setInterval(displayTime, 1000);
};

startClock();

Explanation

The mistake you have in your code is that you are initialising a variable on setInterval, which actually doesn't return anything (returns void).

You also never called the startClock function, which means the clock never started.

Answer 3

You need to update Date() value for each seconds

Put Date() inside you function displayTime()

Here example :

function displayTime() {
    
    var dateVar = new Date();
    var currentHours = dateVar.getHours();
    var currentMinutes = dateVar.getMinutes();
    var currentSeconds = dateVar.getSeconds();
    
    hours.innerHTML = currentHours + ":";
    mins.innerHTML = currentMinutes + ":";
    secs.innerHTML = currentSeconds;
    
}   

Full code :

window.onload = () => {

    var hours = document.getElementById("hoursOut");
    var mins = document.getElementById("minsOut");
    var secs = document.getElementById("secsOut");
    var tiktok;

    function displayTime() {
    
        var dateVar = new Date();
        var currentHours = dateVar.getHours();
        var currentMinutes = dateVar.getMinutes();
        var currentSeconds = dateVar.getSeconds();
    
        hours.innerHTML = currentHours + ":";
        mins.innerHTML = currentMinutes + ":";
        secs.innerHTML = currentSeconds;
    }   



    function startClock(){
        displayTime();
        tikstok = setInterval(displayTime,1000);
    }

    // call function
    startClock();
};

Answer 4

You can do this using , setInterval function .

Thing you must know about setInterval : setInterval function returns an id from which you can stop the setInterval using clearInterval(id) function , where id would be that id returned by setInterval function.

Also, you need to get current date value so, change your displayTime function like this :

function displayTime() {
        var dateVar = new Date();
        var currentHours = dateVar.getHours();
        var currentMinutes = dateVar.getMinutes();
        var currentSeconds = dateVar.getSeconds();
 
        hours.innerHTML = currentHours + ":";
        mins.innerHTML = currentMinutes + ":";
        secs.innerHTML = currentSeconds;
    }   

let id ;
function startClock() {
  displayTime(); 
  id = setInterval(displayTime, 1000);
};
startClock();

For example :

let id ;
function startClock() {
  
  id = setInterval(()=>console.log(new Date().getMinutes()+"min" ), 1000);
};
startClock();

Answer 5

I have found the solution. It seems like declaring the var dateVar var currentHours var currentMinutes var currentSeconds outside of the function will lock in the values. That's probably why the code before only update once.

I have now declare the variables in the local scope but without any values. Then, declare the value of the variables inside of the function displayTime(), therefore it can still be update later on in the startClock() function.

 window.onload = pageLoad;
    function pageLoad(){

    var hours = document.getElementById("hoursOut");
    var mins = document.getElementById("minsOut");
    var secs = document.getElementById("secsOut");


    var dateVar;
    var currentHours;
    var currentMinutes;
    var currentSeconds;
    var tiktok;

    
    function displayTime() {
        dateVar = new Date();
        currentHours = dateVar.getHours();
        currentMinutes = dateVar.getMinutes();
        currentSeconds = dateVar.getSeconds();
        hours.innerHTML = currentHours + ":";
        mins.innerHTML = currentMinutes + ":";
        secs.innerHTML = currentSeconds;
    }   



    function startClock(){
        displayTime();
        tiktok = setInterval(displayTime,1000);
    }

    }

Answer 6

You just need to change only one thing. To update time very second ,you just need to declare Date in-side DisplayTime Function. I have made few changes in your code.

window.onload = pageLoad;
    function pageLoad(){

    var hours = document.getElementById("hoursOut");
    var mins = document.getElementById("minsOut");
    var secs = document.getElementById("secsOut");
    
    var dateVar;
    var tiktok;
    
    function displayTime() {
    dateVar = new Date();
    var currentHours = dateVar.getHours();
    var currentMinutes = dateVar.getMinutes();
    var currentSeconds = dateVar.getSeconds();
    hours.innerHTML = currentHours + ":";
    mins.innerHTML = currentMinutes + ":";
    secs.innerHTML = currentSeconds;
    }   
    function startClock(){
      tiktok = setInterval(displayTime,1000);
    }
    }