JavaScript timer stuck when adding PHP script to footer

Question

I'm trying to convert the 0 in stock text on my website (held within a <p> tag) to a countdown timer, once the stock level hits 0. So I've added this code to the footer - however it seems to just stick, and not count down at all. It also takes a few seconds to replace the 0 in stock text - can I make this quicker/instant? Here's the code so far:

 // Set the count down date var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime(); // Update the count every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // 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); // Display the result if stock = 0 list = document.getElementsByClassName("stock in-stock"); if (list[0].innerHTML == "0 in stock") { list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; } // If the count down is finished, write text if (distance < 0) { clearInterval(x); list = document.getElementsByClassName("stock in-stock"); list[0].innerHTML = "Item expired!"; } }, 1000);

 <p class="stock in-stock">1 in stock</p>

Answer 1

You were trying to populate the P with new data and somehow trying to read out the old data, I've just separated that into 2 spans so you can work with each one individually and updated your JS to reflect the new structure.

To speed up the first call, extract the function:

Please note that we're treating "stock" and "countdown" as 2 different things now.

 // Set the count down date var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime(); function ctd() { // Get today's date and time var now = new Date().getTime(); // 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); //console.log(days + " " + hours + " " + minutes + " " + seconds); // Display the result if stock = 0 countdown = document.getElementsByClassName("countdown"); stock = document.getElementsByClassName("stock-level"); if (stock[0].innerHTML == "1") { countdown[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; } // If the count down is finished, write text if (distance < 0) { clearInterval(x); countdown.innerHTML = "Item expired!"; } } ctd(); // run now // Update the count every 1 second var x = setInterval(ctd, 1000);

 <p class="stock-level" style="display:none">1</p> <p class="countdown"></p>

Answer 2

I got it to work. Here's the code:

<script>
//Set the count down date
var countDownDate = new Date("Feb 20, 2019 18:26:00").getTime();
var startTimer=false;

list = document.getElementsByClassName("stock in-stock");
if(list[0].innerHTML=='1 in stock') {

    startTimer=true;
}

//Check if 1 left                                    
list = document.getElementsByClassName("stock in-stock");
    //Update the count every 1 second
    var x = setInterval(function() {

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

      //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);

      //Update the counter
      if(startTimer) {
          list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      }
      //If the count down is finished, write text
      if (distance < 0) {
        clearInterval(x);
        list = document.getElementsByClassName("stock in-stock");
        list[0].innerHTML = "Item expired!";
      }
    }, 1000);                             
</script>