using setInterval to display time

Question

I am trying to display the most current date and time that occurs every second but the output is staying the same. I dont want to use jquery because I am learning how to do this with javascript. The display function is being called by the body on onload.

function display()
{
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDay();
    var year = today.getFullYear();

    var hour = today.getHours() > 12 ? today.getHours() - 12 : today.getHours();
    var minute = today.getMinutes();
    var seconds = today.getSeconds();
    var milliseconds = today.getMilliseconds();

    var output = month + '/' + day + '/' + year + ' - ' +
    hour + ':' + minute + ':' + seconds + ':' + milliseconds;

    setInterval(function() {

    document.write(output);

    }, 3000);
}

You put something in `output` then you write it to the page each 3 seconds. It won't know that it needs to be updated. — Frederik.L, May 02 '13 at 08:20

score 6 · Answer 1 · edited May 23 '17 at 12:28

Try this :

function display()
{
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDay();
    var year = today.getFullYear();

    var hour = today.getHours() > 12 ? today.getHours() - 12 : today.getHours();
    var minute = today.getMinutes();
    var seconds = today.getSeconds();
    var milliseconds = today.getMilliseconds();

    var output = month + '/' + day + '/' + year + ' - ' +
    hour + ':' + minute + ':' + seconds + ':' + milliseconds;

    document.write(output);
}
setInterval(display, 3000);

sidenote: Is document.write is what you want ? You probably want to display it within a <span> or a <div> . In this case, document.getElementById('someId').innerHTML helps .

another sidenote: setInterval(display, 3000); and setInterval('display();', 3000); is different. See this answer for more details.

PowerPanda · Answer 2 · 2013-05-02T08:10:19.397

2

You need to do the calculation inside the timer function, like this:

function display()
{
  setInterval(function() {
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDay();
    var year = today.getFullYear();

    var hour = today.getHours() > 12 ? today.getHours() - 12 : today.getHours();
    var minute = today.getMinutes();
    var seconds = today.getSeconds();
    var milliseconds = today.getMilliseconds();

    var output = month + '/' + day + '/' + year + ' - ' +
    hour + ':' + minute + ':' + seconds + ':' + milliseconds;

    document.write(output);

  }, 3000);
}
display();

edited May 02 '13 at 08:10

answered May 02 '13 at 07:13

PowerPanda

779
5
11

i tried that but what happens is that the loader keeps loading and nothing changes. – Exploit May 02 '13 at 07:16
you will also need to call the display() function somewhere, to set up the timer. Just call display() at the end of the function – PowerPanda May 02 '13 at 08:09

score 0 · Answer 3 · edited May 02 '13 at 08:23

0

A value of a variable keeps static. So if you don't change the value of outout, it keeps the same.

So you need to calculate the date inside the interval callback and then display it.

edited May 02 '13 at 08:23

Hariharan

3,191
4
19
31

answered May 02 '13 at 07:14

Wouter J

41,455
15
107
112

i tried moving everything inside setinterval and in firebug this is what i see: TypeError: document.getElementById(...) is null [Break On This Error] document.getElementById(output).innerHTML = output; – Exploit May 02 '13 at 07:29

score 0 · Answer 4 · answered Dec 09 '22 at 19:51

import React from 'react'
import './App.css'

function App(){
 const [exactTime, set] = React.useState()
 function p ( ) {
    set (() => {
      const date = new Date ()

      return (
        date.getSeconds()
       )
    });

  }
  setInterval(p, 1000)

  return (

    <div className="App">

      <p>
        Time is { exactTime }
      </p>

    </div>
  );

}

using setInterval to display time

4 Answers4