javascript - Issue with a countdown timer not refreshing

Question

currently i have implemented a countdown timer with js which cycles through certain class and depending on other information created when creating each html element with this class it sets the end time differently.

This all works however for some reason the timer does not tick down(as in the countdown is updateded however when the page is refreshed it shows the correct time for each countdown), i have to manually refresh for the timer to change the js code is below:

// Update the count down every 1 second
            var x = setInterval(function() {
     document.querySelectorAll('p.countDown').forEach(function(node) {


                var elementsId = node.getAttribute('id');
                var taskType = elementsId.split("-")[0];

                if(taskType == "Late") {
                   var countDownDate = new Date("Jan 10, 2021 23:59:00").getTime();
                } else if (taskType == "Mid") {
                var countDownDate = new Date("Jan 10, 2021 15:00:00").getTime();
                } else if (taskType == "Early") {
                var countDownDate = new Date("Jan 10, 2021 10:00:00").getTime();
                }


                // Get today's date and time
                var now = new Date().getTime();


                // Find the distance between now and the count down date
                var distance = countDownDate - now;

                // Time calculations for days, hours, minutes and seconds
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                // Output the result in an element with id="demo"
                if (days == 0) {var countdownText = hours + "h "
                + minutes + "m " + seconds + "s "; } else { var countdownText =
                days + "d " + hours + "h "
                + minutes + "m " + seconds + "s ";
                }

                node.innerHTML = countdownText

                // If the count down is over, write some text
                if (distance < 0) {
                  clearInterval(x);
                  node.innerHTML = "EXPIRED";
            }

            });
            }, 1000);

Answer 1

Try changing setInterval(function(){/**/}, duration) to setInterval(function(){/**/}.bind(this), duration). In setInterval(function, duration) you need to pass function but not calling it, because you will pass the value that will be returned.

Resource: https://www.w3schools.com/jsref/met_win_setinterval.asp