setInterval(); not working. I am trying to get my countdown to go down but it gets stuck and I can't seem to find whats wrong with it

Question

(HTML)
 <div class="countdownholder">
        <div class="content">
            <div class="contentHeader">
                <h3>Days until my 22nd birthday</h3>

            </div>

            <div class="countdownHolder">
                <div class="time1" id="timeDay"><p></p></div>
                <div class="time1" id="timeHours"></div>
                <div class="time1" id="timeMinutes"></div>
                <div class="time1" id="timeSeconds"></div>
            </div>
            


        </div>

    </div>
    
    <script src="js/main.js"></script> 

(javascript)
var birthdayDate = new Date('Jan 04, 2024 00:01:00');
var currentTime = new Date();
var timeLeft = birthdayDate - currentTime; (for current day)
var suspectedDays = document.getElementById("timeDay");
var suspectedHours = document.getElementById("timeHours"); 
var suspectedMins = document.getElementById("timeMinutes");
var suspectedSecs = document.getElementById("timeSeconds");



function getTime(){

    //making the computer do math to get current time//
  var d = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var h = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var m = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var s = Math.floor((timeLeft % (1000 * 60)) / 1000);

    suspectedDays.innerHTML = d;
    suspectedHours.innerHTML = h;
    suspectedMins.innerHTML = m;
    suspectedSecs.innerHTML = s;

}




setTimeout(getTime, 1000); //<-- Does not work 

getTime(birthdayDate, currentTime(current time), timeLeft);

I was recommended to use the interval command but it does not go to plan and the countdown freezes. I looked at other examples but thus end up on the same problem as before. my freidd even looked at this and was stumped.

Answer 1

Consider moving var currentTime and var timeLeft into the function getTime so they actually get re-evaluated each time the getTime function runs. As written it seems like this will write the same time to the elements every time the function runs.

Answer 2

you need to put currentTime in the function getTime() so that getTime methods can calculate remain time whenever called.

function getTime(){
  var currentTime = new Date();
  var timeLeft = birthdayDate - currentTime;

  var d = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var h = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var m = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var s = Math.floor((timeLeft % (1000 * 60)) / 1000);

    suspectedDays.innerHTML = d;
    suspectedHours.innerHTML = h;
    suspectedMins.innerHTML = m;
    suspectedSecs.innerHTML = s;

}