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);
}
}
```
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();
};
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();You have to refactor your code to be like below.
function startClock() {
displayTime(); // Defined in your example
setInterval(displayTime, 1000);
};
startClock();