Double "if" function in counter with GetElementsByClass

Question

Before the user "AlwaysHelping" helped me with my problem. Here's my previous question: How to make double "if" condition in a countdown The problem is that I changed GetElementByID to GetElementsByClassand there the problem began.

I need that when the counter reaches zero and two hours pass from the start of the event "started", it changes to "Ended"

Here's my code javascript

function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//::::::::::::                                       ::::::::::::
//::::::::::::              5:00 AM                  ::::::::::::
//::::::::::::                                       ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//                                   (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,29,12,00,00));

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

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);

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

    // Output the result in an element with id="demo"
    for (const ele of document.getElementsByClassName("t5am")){
        ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
            + minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
    }
    
    // If the count down is over, write some text
    if (distance < 0) {
        for (const ele of document.getElementsByClassName("t5am")) {
            ele.innerHTML = "<p class='live-text'>Live <i class='fa fa-circle faa-flash animated'></i></p> ";
        }
            if (distance + 7200000 < 0){
              ele.innerHTML = "Ended";  
            }
    }
}, 1000);
}t5am()`

Does anyone have any idea how I can achieve this? Thanks.

Answer 1

You are not doing forEach on the ended if - Thats the reason your ended is not showing is that you are not forEach on element for ended.

Also, i am using textContent instead of innerHTML. Its not recemended to use to innerHTML. You can read more about it here

Working Demo: https://jsfiddle.net/usmanmunir/e6zwpfu7/4/

Run snippet below to see it working and ended is appearing on all classNames

function t5am() {
  // Set the date we're counting down to
  // Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //::::::::::::                                       ::::::::::::
  //::::::::::::              5:00 AM                  ::::::::::::
  //::::::::::::                                       ::::::::::::
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //                                   (AAAA,MM,DD,HH,mm,S));
  var countDownDate = new Date(Date.UTC(2020, 05, 29, 12, 00, 00));

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

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);

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

    // Output the result in an element with id="demo"
    for (const ele of document.getElementsByClassName("t5am")) {
      ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> " +
        minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
    }

    // If the count down is over, write some text
    if (distance < 0) {
      for (const ele of document.getElementsByClassName("t5am")) {
        ele.textContent = "<p class='live-text'>Live <i class='fa fa-circle faa-flash animated'></i></p> ";
      }
      if (distance + 7200000 < 0) {
        for (const allEllements of document.getElementsByClassName("t5am")) {
          allEllements.textContent = "Ended";
        }
      }
    }
  }, 1000);
}

t5am()

<div class="t5am"></div>


<div class="t5am"></div>


<div class="t5am"></div>