SetInterval runs only one time

Question

I'm trying to display the time on a clock that I created on my website, so I used the setInterval to display the time every seconds. But it only runs once and I don't know what to do. However, Firefox doesn't notice any error in my code.

var date = new Date(); //Time of the clock in-game
var hours;
var minutes;
var seconds;

var display_hours; // Displayers for the time
var display_minutes;
var display_seconds;

window.onload = function() {
    display_hours = document.getElementById("hour");
    display_minutes = document.getElementById("minute");
    display_seconds = document.getElementById("second");
};

function time_on() {
    hours = date.getHours();
    if (hours < 10) {
        hours = "0" + hours;
    };
    minutes = date.getMinutes();
    if (minutes < 10) {
        minutes = "0" + minutes;
    };
    seconds = date.getSeconds();
    if (seconds < 10) {
        seconds = "0" + seconds;
    };

    display_hours.textContent = hours;
    display_minutes.textContent = minutes;
    display_seconds.textContent = seconds;
};

var go_time = setInterval(time_on, 1000); // Display time on the clock every seconds

I want to be able to clear this interval later in the code.

Why are you defining `go_time` twice? – CertainPerformance May 04 '19 at 10:59 — CertainPerformance, May 04 '19 at 10:59

robertklep · Accepted Answer · 2019-05-04T11:09:14.477

0

My guess is that window.onload triggers after you already created the interval, so inside the interval handler, display_{hours,minutes,seconds} are undefined and cause your code to crash.

Try starting the interval from within the onload handler:

window.onload = function() {
    display_hours = document.getElementById("hour");
    display_minutes = document.getElementById("minute");
    display_seconds = document.getElementById("second");
    var go_time = setInterval(time_on, 1000);
};

EDIT: also, make sure you actually update date each time:

function time_on() {
  date = new Date();
  ...
}

edited May 04 '19 at 11:09

answered May 04 '19 at 11:02

robertklep

198,204
35
394
381

It doesn't work neither : the time is diplayed one time and that's all – Alex May 04 '19 at 11:05
See edit: you don't update `date` ;D – robertklep May 04 '19 at 11:10
It's working, thanks a lot. When I think about it, it makes sense – Alex May 04 '19 at 11:11
Another option, is just place your script just before body close tag. – Keith May 04 '19 at 11:19

Matteo Pagani · Answer 2 · 2019-05-04T11:11:13.257

0

This is a simple clock:

function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
return i;
}

and in the body put this:

<body onload="startTime()">

edited May 04 '19 at 11:11

answered May 04 '19 at 11:04

Matteo Pagani

545
5
14

The problem is that I want to clear the interval later so I have to put it in a var, is it right ? – Alex May 04 '19 at 11:08
1

"try this" is not an answer. What have you changed and why? – Jonas Wilms May 04 '19 at 11:08

SetInterval runs only one time

2 Answers2