Skip to content
Advertisement

How to Use Class Instead of ID

I have this code from this question How To Create Multiple CountDown Timers In The Same Page Using Javascript?. I am not a JavaScript expert so if someone can help me to rewrite this code by using class instead of ID so that I can use multiple class.

This is the code

<div id="trip_2022-12-31"></div>
<div id="trip_2021-11-01 01:02:12"></div>
 <div id="trip_2024-01-01"></div>
 <div id="trip_2023-02-01"></div>
 <div id="trip_2023-01-04"></div>
   
    <script>
        function TimeRemaining(){
   var els = document.querySelectorAll('[id^="trip_"]');
   for (var i=0; i<els.length; i++) {
     var el_id = els[i].getAttribute('id');
     var end_time = el_id.split('_')[1];
     var deadline = new Date(end_time);
     var now = new Date();
     var t = Math.floor(deadline.getTime() - now.getTime());
     var days = Math.floor(t / (1000 * 60 * 60 * 24));
     var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
     var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
     var seconds = Math.floor((t % (1000 * 60)) / 1000);
     if (t < 0) {
        document.getElementById("trip_" + end_time).innerHTML = 'EXPIRED';
     }else{
        document.getElementById("trip_" + end_time).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
     }
   }
}

function StartTimeRemaining(){
    TimeRemaining();
    setInterval(function(){
        TimeRemaining();
    }, 1000)
}


StartTimeRemaining();
    </script>

Advertisement

Answer

I changed your code slightly. Try this:

function TimeRemaining() {
  var els = [...document.querySelectorAll('[class^="trip_"]')];
  els.forEach(el => {
    var end_time = el.className.split("_")[1]
    var deadline = new Date(end_time);
    var now = new Date();
    var t = Math.floor(deadline.getTime() - now.getTime());
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((t % (1000 * 60)) / 1000);
    if (t < 0) {
      document.getElementsByClassName("trip_" + end_time)[0].innerText = 'EXPIRED';
    } else {
      document.getElementsByClassName("trip_" + end_time)[0].innerText = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }
  })
  window.requestAnimationFrame(TimeRemaining);
}

function StartTimeRemaining() {
  TimeRemaining();
  window.requestAnimationFrame(TimeRemaining);
}

StartTimeRemaining()
<div class="trip_2022-12-31"></div>
<div class="trip_2021-11-01 01:02:12"></div>
<div class="trip_2024-01-01"></div>
<div class="trip_2023-02-01"></div>
<div class="trip_2023-01-04"></div><br>[Added to check expiration function]
<div class="trip_2021-2-17"></div>

Specifically, I shortened the el_id since it didn’t have much of a purpose, and I put the whole thing in a forEach. I also changed the getElementById to getElementsByClassName(...)[0]. I also changed the innerHTML to innerText, since innerText puts the text in as it is, and prevents problems with special characters. Finally, I changed the setTimeout to requestAnimationFrame since that typically calls as often as possible without hindering other functions. This was in order to show the timing as close to as the real thing as possible, since if the page loads at halfway through a second then the timer would be half a second off.

Advertisement