Counter script not outputting anything-CodePudding

I wrote code in JavaScript for a counter to be output in my HTML webpage, but nothing is being printed. Where is my logic wrong?

<script>
function calCountDown(){
    var temp = new Date("Dec 11, 2022"); //makes an object 'temp' with current date and time
    var deadline = temp.getTime();     //stores the deadline time
    temp= new Date();                   //stores the object of current date and time
    var currentTime = temp.getTime();   //gets the current time

    var timeDifference = deadline - currentTime;

    var day = Math.floor(timeDifference / (1000*60*60*24));       //calculates the difference in days from today till deadline
    var hour = Math.floor((timeDifference % (1000*60*60*24))/(1000*60*60));   //calculates the difference in hours from today till deadline
    var minute = Math.floor((timeDifference % (1000*60*60))/(1000*60));   //calculates the difference in minutes from today till deadline
    var sec = Math.floor((timeDifference % (1000*60))/1000);      //calculates the difference in seconds from today till deadline

    //THIS WILL OUTPUT THE TIME EVERYTIME THIS FUNCTION IS CALLED
    document.getElementById("demo").innerHTML = days   "d "   hours   "h "   minutes   "m "   seconds   "s ";

    if(timeDifference < 0){
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "ENDED !!!";
    }
}

 var x = setInterval(calCountDown(), 1000);  

</script>

CodePudding user response：

Remove the () in your setInterval call:

var x = setInterval(calCountDown, 1000);

setInterval takes a function itself (or a string), you were passing it the return value from your function, which in this case is undefined.

For clarity, you were executing setInterval(undefined, 1000).

CodePudding user response：

You have a couple of variables with incorrect names on this line:

document.getElementById("demo").innerHTML = days   "d "   hours   "h "   minutes   "m "   seconds   "s ";

I think it should be:

document.getElementById("demo").innerHTML = day   "d "   hour   "h "   minute   "m "   sec   "s ";

Also, you had the same value on the deadline and currentTIme variables.

I have changed it on the example below, and you can see the it outputs the time to the #demo:

function calCountDown() {
  var temp = new Date("Dec 11, 2022"); //makes an object 'temp' with current date and time
  var deadline = temp.getTime(); //stores the deadline time
  var currentTime = new Date(); //gets the current time

  var timeDifference = deadline - currentTime;

  var day = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); //calculates the difference in days from today till deadline
  var hour = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); //calculates the difference in hours from today till deadline
  var minute = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); //calculates the difference in minutes from today till deadline
  var sec = Math.floor((timeDifference % (1000 * 60)) / 1000); //calculates the difference in seconds from today till deadline

  //THIS WILL OUTPUT THE TIME EVERYTIME THIS FUNCTION IS CALLED
  document.getElementById("demo").innerHTML = day   "d "   hour   "h "   minute   "m "   sec   "s ";

  if (timeDifference < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "ENDED !!!";
  }
}

var x = setInterval(calCountDown, 1000);

<p id="demo"></p>