Multiple (14) countdowns on HTML page don't work

Question

I want to display 14 countdowns (preferably as plain p elements in my HTML document) on a single HTML page. I don't know anything about JavaScript so I took a countdown script from w3schools. Works fine, somehow I even manages to display the timer double digit by searching the web how to.

Here's the code (UPDATE!):

// defining countDownDates as an empty array : 
    var countDownDates = [];

    // adding any count down date to your array : 
    countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime());
    countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime());
    countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
    countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
    countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
    countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
    countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime());
    countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime());
    countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
    countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
    countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
    countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
    countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime());
    countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime());

    // calling an init function that will build the HTML needed for every count down
    init(countDownDates);

    // looping through your array of countDownDates
    for (var i=0;i<countDownDates.length;i++) {
        // calling the countdown function, pass it the array and the current version of i as parameters 
        countDown(countDownDates, i);
    }

    /* adds, to the document, a p element for each entry in the countDownDates array */
    function init(countDownDates) {     
        var timersDiv = document.getElementById("timers");
        var dateElement;
        for (var i=0;i<countDownDates.length;i++) {         
            dateElement = document.createElement("p");
            dateElement.id = "date" + i;
            timersDiv.appendChild(dateElement);
        }   
    }       

    /* countDown function, your countDown handling code within a reusable function */
    function countDown(countDownDates, index) {
        var x = setInterval(function() {
            var now, distance, days, hours, minutes, seconds, x;

            now = new Date().getTime();
            distance = countDownDates[index] - now;

            // Time calculations for days, hours, minutes and seconds
            days = Math.floor(distance / (1000 * 60 * 60 * 24));
            hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
            (1000 * 60 * 60));
            minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            seconds = Math.floor((distance % (1000 * 60)) / 1000);                            

            // Display days, hours, minutes and seconds in 2 digits if < 10
            if((days+"").length === 1){
                days = "0"+days;
            }
            if((hours+"").length === 1){
                hours = "0"+hours;
            }
            if((minutes+"").length === 1){
                minutes = "0"+minutes;
            }
            if((seconds+"").length === 1){
                seconds = "0"+seconds;
            }

            // Display the result in the element with id date0, date1, etc.
            document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";

            // If the count down is finished, write some text and add css class to change ended timers color 
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("date" + index).className = "timerend";
                document.getElementById("date" + index).innerHTML = "00:00:00:00";
            }

        }, 1000);
    }

I tried to multiply the script completely 14 times with altered first line of code to a specific future date - so the same countdown shows up 14 times.

Is there a way to multiply the first line somehow 14 times to have 14 different specific dates to count from in 14 different p elements by 14 IDs? eg

<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</p>

Edit: In addition I would like to know how I can have two additional p element outputs like

<p class="online_date0" >show text "This countdown is running right now"</p>
<p class="offline_date0 >show text "This countdown is not running at the moment</p>

... to have something like an indicator like "on air". Thanks!

Edit Nov 1, 2017

I don't get why this don't work in the specific if funktion:

if (distance < 0) {
clearInterval(x);
    document.getElementById("date" + index).className = "timerend";
    document.getElementById("outofdate" + index).className = "timerend";
    document.getElementById("date" + index).innerHTML = "00:00:00:00";

In the HTML document the date + index p s have a class which is removed when timerend is added. If I add a + before = in the first line after clearInterval(x) the old class stays, but the new class is added every second. I just want to add it one time of course. And if I don't put + before = in that line, the old class is removed of course. Since I'm beginning to learn Js I want to understand what is happening here. What did I miss? I just want to add a class to every p with indexed ids so it changes color when timer ends. It works, but it removes all other formats I put by the class those indexed p s have.

HTML

<p id="date0" class="dates"></p>

In CSS I put padding and so on in .dates . I've read about adding classes and keep originals, but can't understand a solution obviously.

Answer 1

Here is an demo with 8 timers

• Refactor your logic to a method which accepts element Node and countDownDate

• Put data-countDownDate millisecond value in the element itself.

• Iterate the timers and initialize them.

 //var countDownDate = new Date("Oct 22, 2019 14:00:00").getTime(); [].slice.call( document.querySelectorAll( ".dateTimer" ) ).forEach( function( element ){ startTimer(element, Number(element.getAttribute( "data-countDownDate" )) ); }); function startTimer(element, countDownDate) { // Update the count down every 1 second //console.log( element ); var x = setInterval(function() { var now = new Date().getTime(); 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); if ((days + "").length === 1) { days = "0" + days; } if ((hours + "").length === 1) { hours = "0" + hours; } if ((minutes + "").length === 1) { minutes = "0" + minutes; } if ((seconds + "").length === 1) { seconds = "0" + seconds; } element.innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + ""; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); element.innerHTML = "Ende!"; } }, 1000); } 

 <p class="dateTimer" data-countDownDate="1509823808052"></p> <p class="dateTimer" data-countDownDate="1509823818052"></p> <p class="dateTimer" data-countDownDate="1509823828052"></p> <p class="dateTimer" data-countDownDate="1509823838052"></p> <p class="dateTimer" data-countDownDate="1509823848052"></p> <p class="dateTimer" data-countDownDate="1509823858052"></p> <p class="dateTimer" data-countDownDate="1509823868052"></p> <p class="dateTimer" data-countDownDate="1509823878052"></p> 

Answer 2

To "multiply" your code, you could combine the use of an array and a function.

• In your array, you would define your 14 countDownDates.
• You would loop through this array with a for loop, for instance
• You would pass the current countDownDate information to a function that will handle the single countdown, just the way your code handles it now.

Here's an example :

 // defining countDownDates as an empty array : var countDownDates = []; // adding any count down date to your array : countDownDates.push(new Date("Oct 24, 2017 10:49:50").getTime()); countDownDates.push(new Date("Oct 24, 2017 10:49:45").getTime()); countDownDates.push(new Date("Oct 28, 2017 10:49:45").getTime()); countDownDates.push(new Date("Oct 29, 2017 10:49:45").getTime()); countDownDates.push(new Date("Oct 30, 2017 10:49:45").getTime()); countDownDates.push(new Date("Nov 1, 2017 10:49:45").getTime()); countDownDates.push(new Date("Nov 12, 2017 10:49:45").getTime()); countDownDates.push(new Date("Nov 24, 2017 10:49:45").getTime()); // calling an init function that will build the HTML needed for every count down init(countDownDates); // looping through your array of countDownDates for (var i=0;i<countDownDates.length;i++) { // calling the countdown function, pass it the array and the current version of i as parameters countDown(countDownDates, i); } /* adds, to the document, ap element for each entry in the countDownDates array */ function init(countDownDates) { var timersDiv = document.getElementById("timers"); var dateElement; for (var i=0;i<countDownDates.length;i++) { dateElement = document.createElement("p"); dateElement.id = "date" + i; timersDiv.appendChild(dateElement); } } /* countDown function, your countDown handling code within a reusable function */ function countDown(countDownDates, index) { var x = setInterval(function() { var now, distance, days, hours, minutes, seconds, x; now = new Date().getTime(); distance = countDownDates[index] - now; // Time calculations for days, hours, minutes and seconds days = Math.floor(distance / (1000 * 60 * 60 * 24)); hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display days, hours, minutes and seconds in 2 digits if < 10 if((days+"").length === 1){ days = "0"+days; } if((hours+"").length === 1){ hours = "0"+hours; } if((minutes+"").length === 1){ minutes = "0"+minutes; } if((seconds+"").length === 1){ seconds = "0"+seconds; } // Display the result in the element with id date0, date1, etc. document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + ""; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("date" + index).innerHTML = "Ende!"; } }, 1000); } 

 <!-- just an empty div we will add countDown elements into --> <div id="timers"> </div>