How to I auto-update a clock in Javascript?

Question

I am trying to make a simple web based clock app using pure java-script. I think the general code is right, but I'm not sure how to automatically call the function at a set interval of time. I thought the window.onload, followed by the setInterval method would do this. But it's not automatically updating every half second as I expected. What am I doing wrong?

<!doctype html>

<html>

    <head>
        <title>Real Time Clock</title>
        <script>

            var time, h, m, s, track;
            track = 0;
            window.onload = function() { setInterval( timeNow(), 100); }

            function timeNow() {

              time = new Date();
              track += 1;
              h = time.getHours();
              m = time.getMinutes();
              s = time.getSeconds();
              if ( s < 10 ) { s = "0" + s; } /* we add a 0 in front of s, when it is lower than 10, because that's what most clocks display, this is for the human user rather than for any need by the computer */
              document.getElementById("time").innerHTML = h + ':' + m + ':' + s;
              document.getElementById("track").innerHTML = track;

            }

        </script>
    </head>

    <body>

        <span id="time">~Waiting for time update.</span><br>
        <span id="track"></span>


    </body>

</html>

score 0 · Answer 1 · answered Nov 15 '16 at 11:57

Seems to work fine. Just needed to change

window.onload = function() { setInterval( timeNow(), 100); }

to

 window.onload = function() { setInterval( timeNow, 100); }

<!doctype html>

<html>

    <head>
        <title>Real Time Clock</title>
        <script>

            var time, h, m, s, track;
            track = 0;
            window.onload = function() { setInterval( timeNow, 100); }

            function timeNow() {

              time = new Date();
              track += 1;
              h = time.getHours();
              m = time.getMinutes();
              s = time.getSeconds();
              if ( s < 10 ) { s = "0" + s; } /* we add a 0 in front of s, when it is lower than 10, because that's what most clocks display, this is for the human user rather than for any need by the computer */
              document.getElementById("time").innerHTML = h + ':' + m + ':' + s;
              document.getElementById("track").innerHTML = track;

            }

        </script>
    </head>

    <body>

        <span id="time">~Waiting for time update.</span><br>
        <span id="track"></span>


    </body>

</html>

score 0 · Answer 2 · answered Nov 15 '16 at 12:01

use setInterval(timeNow,100); instead of setInterval(timeNow(),100);

            var time, h, m, s, track;
            track = 0;
            window.onload = function() { 
              var start = setInterval(timeNow,100);
            }

            function timeNow() {

              var time = new Date();
              track += 1;
              h = time.getHours();
              m = time.getMinutes();
              s = time.getSeconds();
      
              if ( s < 10 ) { s = "0" + s; } 
              document.getElementById("time").innerHTML = h + ':' + m + ':' + s;
              document.getElementById("track").innerHTML = track;

            }

     

        <span id="time">~Waiting for time update.</span><br>
        <span id="track"></span>

score 0 · Answer 3 · answered Nov 15 '16 at 12:02

0

You are passing an undefined (as the result of calling timeNow) to setInterval. You need to pass the function, so the code will be:

window.onload = function() { setInterval(timeNow, 100); }

answered Nov 15 '16 at 12:02

srifqi

71
1
6

How to I auto-update a clock in Javascript?

3 Answers3