Make the code work on each element and according to own date-CodePudding

I want to make countdown using javascript and a table html element. The code works fine but the issue is i have two tables each table has own 'time' element and own date here in my code and i want to make a countdown according to his own element value, this is the code:

            <article>
              <div >
                <div >
                  <p >
                    <time  datetime="2024-11-30 08:50:00">January 21 at 01:00</time>
                  </p>
                </div>
              </div>
              <div >
                  <table style="width:100%; text-align: left;">
                    <tr>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                    <td ></td>
                    </tr>
                    <tr>
                      <th>DAYS</th>
                      <th>HOURS</th>
                      <th>MINS</th>
                     <th>SECS</th>
                    </tr>
                  </table>
                </div>
            </article>
          </div><!-- End post list item -->

          <div >
            <article>
              <div >
                <div >
                  <p >
                    <time datetime="2025-11-30 08:50:00">January 21 at 01:00</time>
                  </p>
                </div>
                
              </div>
              <div >
                  <table style="width:100%; text-align: left;">
                    <tr>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                    <td ></td>
                    </tr>
                    <tr>
                      <th>DAYS</th>
                      <th>HOURS</th>
                      <th>MINS</th>
                     <th>SECS</th>
                    </tr>
                  </table>
                </div>

            </article>
          </div><!-- End post list item -->

this is my javacript code that making a coundown:

<script>
/* Countdown for 'Upcoming Events'*/
// Set the date we're counting down to

var enddateTime = document.getElementsByTagName('time')[0].getAttribute('datetime');


var countDownDate = new Date(enddateTime).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

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


    // Display the result in the element with id="demo"
CountdownDays(days);
CountdownHours(hours);
CountdownMinutes(minutes);
CountdownSeconds(seconds);


  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementsByClassName("countdown").innerHTML = "EXPIRED";
  }
}, 1000);

function CountdownDays(value)
{
    var countDownDays = document.getElementsByClassName("days");
      for(let i=0;i<countDownDays.length;i  ){
        countDownDays[i].innerHTML = value;
  }
}

function CountdownHours(value) {

  var countDownHours = document.getElementsByClassName("hours");
      for(let i=0;i<countDownHours.length;i  ){
        countDownHours[i].innerHTML = value;
  }
}

function CountdownMinutes(value) {
  var countDownMinutes = document.getElementsByClassName("minutes");
      for(let i=0;i<countDownMinutes.length;i  ){
        countDownMinutes[i].innerHTML = value;
  }
}

function CountdownSeconds(value) {
  var countDownSeconds = document.getElementsByClassName("seconds");
      for(let i=0;i<countDownSeconds.length;i  ){
        countDownSeconds[i].innerHTML = value;
  }

}
</script>```


So is it possible to get a countdown for each 'datetime' according to each own class date without repeating the function two times?

CodePudding user response：

I've edited my answer as per your requirement...kindly edit the dates to test

const countdowns = document.querySelectorAll('.countdown');

countdowns.forEach(countdown => {
  const sibling = countdown.parentNode.parentNode.parentNode.nextElementSibling
  const endDate = new Date(countdown.getAttribute('datetime'));
  const daysElement = sibling.querySelector('.days');
  const hoursElement = sibling.querySelector('.hours');
  const minutesElement = sibling.querySelector('.minutes');
  const secondsElement = sibling.querySelector('.seconds');
  
  
  setInterval(() => {
    const currentDate = new Date();
    const timeLeft = endDate - currentDate;
    if (timeLeft <= 0) {
        countdown.innerHTML = "EXPIRED";
        clearInterval();
    } else {
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
    
        daysElement.innerHTML = days;
        hoursElement.innerHTML = hours;
        minutesElement.innerHTML = minutes;
        secondsElement.innerHTML = seconds;
    }
  }, 1000);
  })

  <article>
              <div >
                <div >
                  <p >
                    <time  datetime="2023-01-16 12:38:00">January 21 at 01:00</time>
                  </p>
                </div>
              </div>
              <div >
                  <table style="width:100%; text-align: left;">
                    <tr>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                    <td ></td>
                    </tr>
                    <tr>
                      <th>DAYS</th>
                      <th>HOURS</th>
                      <th>MINS</th>
                     <th>SECS</th>
                    </tr>
                  </table>
                </div>
            </article>
         <!-- End post list item -->

          <div >
            <article>
              <div >
                <div >
                  <p >
                    <time  datetime="2025-11-30 08:50:00">January 21 at 01:00</time>
                  </p>
                </div>
                
              </div>
              <div >
                  <table style="width:100%; text-align: left;">
                    <tr>
                      <td ></td>
                      <td ></td>
                      <td ></td>
                    <td ></td>
                    </tr>
                    <tr>
                      <th>DAYS</th>
                      <th>HOURS</th>
                      <th>MINS</th>
                     <th>SECS</th>
                    </tr>
                  </table>
                </div>

            </article>
          </div>