Streaming live at 10am (PST)

Countdown Inside CMS | Error Repeating same timing


#1

I want to add Countdown?Timer to CMS

Here is code from https://www.w3schools.com/howto/howto_js_countdown.asp

<!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
    </style>
    </head>
    <body>

    <p id="demo"></p>

    <script>
    // Set the date we're counting down to
    var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();

    // 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 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);
        
        // Output the result in an element with id="demo"
        document.getElementById("demo").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";
        
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
    </script>

    </body>
    </html>

Error: It shows same timing to all list

Here is how I bind them to the collection


Thank you all Awesome Webflow Community members :slight_smile:

Invite: @PixelGeek @samliew @Andrew @system


#2

Line 37 & 38 in your screenshot above is incorrect. Refer to the original code again.


#3

Hi @samliew

I remove this part because i just need the days count and it working good but with cms it shows same count to all the list even the time is different for all individual list.

[+ hours + "h " + minutes + "m " + seconds + "s ";]

I found it shows one timer per page, When i try to add 2nd it shows blank, May be there some extra line of code needed to display multiple countdown at single page.

:slight_smile:


#4

Anyone can fix this?


#5

Can you please provide a share link to your project as well as published link to the site?


#6

Hi @samliew

Apologise for late response i’m stuck in places with no internet access.

Here is preview link
published site

Main cms list page with countdown timer

Here you can see all the timer shows same countdown

Looking forward for your answer and thankyou :slight_smile:


#7

Hello @samliew Have you find any code error or something it needs to be added!

:thinking: