Trouble with setInterval not refreshing the HTML element

Question

Trouble with setInterval not refreshing the HTML element

I'm currently working on a script that should update the value of an element every second. However, I've encountered an issue where the element only updates the first time and then stops. Strangely, there are no errors appearing in the console either.

What's even more puzzling is that the console.log() function continues to run, but the element and the time variable don't seem to update.

var today = new Date();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');

setInterval(function() {
  time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var elTime = document.getElementById("time");
  elTime.textContent = time;
  console.log(time);
}, 1000);

javascript

Answer 1

Answer №1

One way to tackle this is by ensuring that the variables are updated each time the setInterval function runs.

(function() {
  setInterval(function() {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
    time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var elTime = document.getElementById("time");
    elTime.textContent = time;
    console.log(time);
  }, 1000);
})()

<div id="time"></div>

Answer 2

One way to tackle this is by ensuring that the variables are updated each time the setInterval function runs.

(function() {
  setInterval(function() {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var date = today.getFullYear() + '/' + String(today.getMonth() + 1).padStart(2, '0') + '/' + String(today.getDate()).padStart(2, '0');
    time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var elTime = document.getElementById("time");
    elTime.textContent = time;
    console.log(time);
  }, 1000);
})()

<div id="time"></div>

Answer 3

Answer №2

Make sure to update the time display constantly within the interval. Modify your code like this:

setInterval(function(){
   var now = new Date();
  currentTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
  var elementTime = document.getElementById("time");
  elementTime.textContent = currentTime;
  console.log(currentTime);
}, 1000);

Answer 4

Make sure to update the time display constantly within the interval. Modify your code like this:

setInterval(function(){
   var now = new Date();
  currentTime = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
  var elementTime = document.getElementById("time");
  elementTime.textContent = currentTime;
  console.log(currentTime);
}, 1000);

Answer 5

Answer №3

A basic setInterval program in action can be seen below.

setInterval(() => {
  var updateTime = document.getElementById("time");
  updateTime.textContent = parseInt(updateTime.textContent) + 1;
}, 1000);

<div id="time">0</div>

All code to be executed should be contained within the setInterval function's scope. Make sure to include your entire script inside the function's scope for it to run regularly, like so:

setInterval(function() {
  //Variables
  var currentDateTime = new Date();
  var timeNow = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() + ":" + currentDateTime.getSeconds();
  var dateToday = currentDateTime.getFullYear() + '/' + String(currentDateTime.getMonth() + 1).padStart(2, '0') + '/' + String(currentDateTime.getDate()).padStart(2, '0');
  timeNow = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() + ":" + currentDateTime.getSeconds();
  var elTimeUpdate = document.getElementById("time");
  elTimeUpdate.textContent = timeNow;
  console.log(timeNow);
}, 1000);

<div id="time"></div>

Answer 6

A basic setInterval program in action can be seen below.

setInterval(() => {
  var updateTime = document.getElementById("time");
  updateTime.textContent = parseInt(updateTime.textContent) + 1;
}, 1000);

<div id="time">0</div>

All code to be executed should be contained within the setInterval function's scope. Make sure to include your entire script inside the function's scope for it to run regularly, like so:

setInterval(function() {
  //Variables
  var currentDateTime = new Date();
  var timeNow = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() + ":" + currentDateTime.getSeconds();
  var dateToday = currentDateTime.getFullYear() + '/' + String(currentDateTime.getMonth() + 1).padStart(2, '0') + '/' + String(currentDateTime.getDate()).padStart(2, '0');
  timeNow = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() + ":" + currentDateTime.getSeconds();
  var elTimeUpdate = document.getElementById("time");
  elTimeUpdate.textContent = timeNow;
  console.log(timeNow);
}, 1000);

<div id="time"></div>

Answer 7

Answer №4

SetInterval is a mechanism for calling functions at specified intervals.

It's important to note that SetInterval cannot guarantee precise timing, as the time between each invocation is more of an approximation for the browser to use. Depending on other tasks that need to be executed, the actual interval may be longer than what was initially requested. This variance can result in delays of a few milliseconds or even more.

If you are looking for easy-to-use native JavaScript time formatting, check out this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

const elTime = document.getElementById("time")

ShowTime()                    // initial display
setInterval(ShowTime, 1000)  // subsequent updates

function ShowTime()
{
  let currentTime = new Date()
  elTime.textContent = currentTime.toLocaleTimeString('default', { hour12:false } ) 
}

<p id="time"></p>

Answer 8

SetInterval is a mechanism for calling functions at specified intervals.

It's important to note that SetInterval cannot guarantee precise timing, as the time between each invocation is more of an approximation for the browser to use. Depending on other tasks that need to be executed, the actual interval may be longer than what was initially requested. This variance can result in delays of a few milliseconds or even more.

If you are looking for easy-to-use native JavaScript time formatting, check out this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

const elTime = document.getElementById("time")

ShowTime()                    // initial display
setInterval(ShowTime, 1000)  // subsequent updates

function ShowTime()
{
  let currentTime = new Date()
  elTime.textContent = currentTime.toLocaleTimeString('default', { hour12:false } ) 
}

<p id="time"></p>

Trouble with setInterval not refreshing the HTML element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Challenges encountered with Material-UI elements

How can you ensure that the Data Point Values are always displayed when using arrayToDataTable in the Google Charts API?

JavaScript Promise Synchronization

Tips for dynamically creating column headings and table values using JSON arrays in AngularJS

Scrolling with animation

Cannot locate AngularJS + Typescript controller

Customize the theme of Ant Design for VueJS

What is the best way to prevent labels from floating to the top when in focus?

Using Formik with Material UI's TextField component and passing a 'label' prop to the Field component

Arrange objects in an array according to the order specified in another array

JavaScript example: Defining a variable using bitwise OR operator for encoding purposes

Run JavaScript code before finalizing the "submit" action within a Ruby on Rails application

I am having issues with Hot Reload in my React application

Arrow function utilized in string rendered component

Check if the element is located on the active tab using jQuery

Showing or hiding child content based on the selected state of a radio button

Updating the value of a key within a jQuery object

The Vuejs single-file component fails to display on the page

To prevent the background window from being active while the pop-up is open

Select from a list to save