I'm trying to show a simple 24 hour countdown timer that resets once expired. I noticed it will only show one element with the time.I'm using duplicate ID's for the example but the timer doesn't work at all with classes. If you can spot where I'm going wrong or suggest another efficient script that would be great.
function makeMeTwoDigits(n) {
return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).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);
// Output the result in an element with id="time"
document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" +
makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "soon";
}
}, 1000);<span id="time" style="font-size: 28px;"></span>
<span id="time" style="font-size: 28px;"></span>You can use a class with querySelectorAll, and loop on the result:
function makeMeTwoDigits(n) {
return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).getTime();
// Select all .time
var timeSpans = document.querySelectorAll(".time")
// 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);
// Output the result in all elements with class="time"
timeSpans.forEach(span => {
span.innerHTML = makeMeTwoDigits(hours) + ":" +
makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
})
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
timeSpans.forEach(span => { span.innerHTML = "soon"; })
}
}, 1000);<span class="time" style="font-size: 28px;"></span>
<span class="time" style="font-size: 28px;"></span>change the id of the second one and copy what you did for one and do for the other
function makeMeTwoDigits(n) {
return (n < 10 ? "0" : "") + n;
}
// Set the date we're counting down to
var countDownDate = new Date(2022, 4, 30, 24, 00, 0, 0).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);
// Output the result in an element with id="time"
document.getElementById("time").innerHTML = makeMeTwoDigits(hours) + ":" +
makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
document.getElementById("time2").innerHTML = makeMeTwoDigits(hours) + ":" +
makeMeTwoDigits(minutes) + ":" + makeMeTwoDigits(seconds) + "";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "soon";
document.getElementById("time2").innerHTML = "soon";
}
}, 1000);<span id="time" style="font-size: 28px;"></span>
<span id="time2" style="font-size: 28px;"></span>