countdown timer

At a glance

The community member has a countdown timer that works well, but it doesn't work when replicated on the same page. The comments suggest that the issue is because the script is only finding the first timer and adding it to that. To fix this, the community members recommend:

1. Giving each timer a unique ID and modifying the script to handle multiple timers.

2. Using data-attributes instead, which may be a cleaner solution. An example is provided that uses data-countdown and data-countdown-days, data-countdown-hours, etc. to handle multiple timers.

The community members indicate that this should resolve the issue of having multiple countdown timers on the same page.

RRamvidal

H! i taked a cowntdown timer from templates and works well, but dont works if i replicate in the same page, can help me please to fix it?

<script>
//👇 Set the date we're counting down to
const countDownDate = new Date("Jan 13, 2026 21:00:00").getTime();
// 👆

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

// Get today's date and time
const now = new Date().getTime();

// Find the time left
const distance = countDownDate - now;

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

// Output the result in the elements with class="countdown-..."
document.querySelector('.countdown-day').innerHTML = days;
document.querySelector('.countdown-hr').innerHTML = hours;
document.querySelector('.countdown-min').innerHTML = minutes;
document.querySelector('.countdown-sec').innerHTML = seconds;
}, 1000);
</script>

Attachment

7 comments

JJeremy

@Ramvidal, quite a long time ago there was someone who built a countdown timer in here. His name was Alex. (I think he use to be a team member but is no longer). You might be able to find his file link somewhere if you search.

RRamvidal

yes it is the file of alex

JJeremy

Ah. So you're including that same timer more than 1 time on the same page? You'll need to have multiple timers. Right now, it would only find the first one and add the timer to that.

JJeremy

give each timer a unique ID
modify script to handle more than 1

JJeremy

Try with data-attributes instead, it might be a cleaner solution... he's an example.

function initCountdownTimers() {
const containers = document.querySelectorAll('[data-countdown]');

containers.forEach(container => {
const targetDate = container.dataset.countdown;
const countDownDate = new Date(targetDate).getTime();
const interval = setInterval(() => {
const now = new Date().getTime();
const distance = countDownDate - now;

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

// Update the elements
const dayElement = container.querySelector('[data-countdown-days]');
const hourElement = container.querySelector('[data-countdown-hours]');
const minuteElement = container.querySelector('[data-countdown-minutes]');
const secondElement = container.querySelector('[data-countdown-seconds]');

if (dayElement) dayElement.textContent = days;
if (hourElement) hourElement.textContent = hours;
if (minuteElement) minuteElement.textContent = minutes;
if (secondElement) secondElement.textContent = seconds;

// If the countdown is finished, clear the interval
if (distance < 0) {
clearInterval(interval);
container.textContent = "EXPIRED";
}
}, 1000);
});

JJeremy

html structure:

<div data-countdown="Jan 13, 2026 21:00:00">
<span data-countdown-days></span> days
<span data-countdown-hours></span> hours
<span data-countdown-minutes></span> minutes
<span data-countdown-seconds></span> seconds
</div>

<div data-countdown="Dec 25, 2024 00:00:00">
<span data-countdown-days></span> days
<span data-countdown-hours></span> hours
<span data-countdown-minutes></span> minutes
<span data-countdown-seconds></span> seconds
</div>

RRamvidal

Thank you I will test

Add a reply

Join the Webstudio community

countdown timer