How do I change the HTML DOM with Javascript when the Date changes/Time is met?

Question

Example: When it is Midnight (hr)0 : (min) 0 : (sec) 1 Change the HTML P element to "New Day" ...

This code works but requires me to refresh the page when the time is met. I use var.getMinutes() for testing purposes.

const d = new Date();
const h = d.getHours();
const m = d.getMinutes();
const s = d.getSeconds();
const day = document.querySelector('#current-day');

function addDay() {
  if(m === 13) {
    day.innerHTML = 'New Day';
    console.log('works');
  } return
} 

window.setInterval(addDay(),1000);

The 13th minute or the 13th hour (1:00PM)? `if(m === 13) {...`? — zer00ne, Feb 24 '22 at 04:42
13th minute. m is the var for getMinutes(). Using it to for testing purposes, to see if the function works at any specified minute according to your time in hopes of it changing the HTML. — Jimmie Davis, Feb 24 '22 at 04:44
[look at this thread](https://stackoverflow.com/questions/8779845/javascript-setinterval-not-working) — Halim Saad-Rached, Feb 24 '22 at 05:05

Shreshth · Accepted Answer · 2022-02-24T05:22:53.630

There are two problems in your code.

setInterval accepts a function as the first argument, but you're giving it the return value of the function call. You should instead pass the function to setInterval, like so: window.setInterval(addDay, 1000);.

Function call (when you execute a function):

addDay()

Function definition (when you describe what the function does):

function(args) {
    // perform some calculations using the arguments
}

Inside the function addDay, you are using m. But m will be evaluated only once. It won't update as time passes (as it should). You should evaluate m inside the function. More importantly, you should evaluate the current date in the function. So every time the function executes, the value for d and m will update. (see the code snippet below)

const day = document.querySelector('#current-day');

function addDay() {
  const d = new Date();
  const h = d.getHours();
  const m = d.getMinutes();
  const s = d.getSeconds();

  if (m === 13) {
    day.innerHTML = 'New Day';
    console.log('works');
  }
}

window.setInterval(addDay, 1000);

<div id="current-day"></div>

Thank you for the help, this worked.. Can you explain again why the variables need to be inside the function for it to work? And why they do not work when outside the function? Just for my understanding — Jimmie Davis, Feb 24 '22 at 05:14
Sure. Let's say the time now is 11:23:51 (HH:MM:SS), when you do `d = new Date()`, d store the current time (and date). After that no matter when you do `m = d.getMinutes()`, you will get the same value, because the time stored in `d` is of when you called the date constructor (`new() Date()`). But if you move this logic inside the function body, every time the function is called, the time when you call the function will be stored in `d`. Now since, setInterval calls the function for you, every second, the values will be update every second and checked against the fixed value of `13`. — Shreshth, Feb 24 '22 at 05:20

How do I change the HTML DOM with Javascript when the Date changes/Time is met?

1 Answers1