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);
}

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);
}

• javascript

• No . With such way, the value of output is the same. – Raptor Commented May 2, 2013 at 7:11
• 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 Commented May 2, 2013 at 8:20

4 Answers 4

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.

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();

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.

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>
  );

}