Estoy tratando de mostrar una cuenta regresiva en varias etiquetas div con la misma clase.
Pero el problema es que solo la última etiqueta de la lista contiene la cuenta regresiva.
Aquí está el código:
const contentsDownDate = document.querySelectorAll(".countDown"); nbElement = contentsDownDate.length - 1; for (var i = 0; i < nbElement; i++) { var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime(); // Update the count down every 1 second 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="demo" contentsDownDate[i].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); contentsDownDate[i].innerHTML = "EXPIRED"; } }, 1000); }Hice lo mismo llamando a los identificadores, pero aún así obtuve el mismo resultado, solo el último identificador muestra la cuenta regresiva.
¿Qué puedo hacer para solucionar este problema?
Tenga en cuenta que el código de cuenta regresiva se toma de esto: w3schools
PD: también leí que innerHTML se imprime al final del ciclo, por lo que solo imprime la última etiqueta y, por lo tanto, debe detener/pausar el ciclo para imprimir, especialmente con setInterval , pero ya lo hice. ¿A menos que este fuera para actualizar el tiempo de cuenta regresiva? Pero en ese caso, ¿dónde debo colocar el otro setInterval ?
La razón por la que esto no funciona es porque ingresa al bucle infinito en un estado de bloqueo, lo que significa que el intervalo nunca se ingresa ya que el navegador está ocupado en bucle. Imagine que el navegador solo puede hacer una cosa a la vez, como en un solo hilo, por lo que el bucle es él y no puede hacer nada más hasta que esté hecho, y en su caso nunca.
Básicamente, si coloca un setInterval() dentro del ciclo sin borrarlo, entonces setInterval nunca se detiene y eso significa que el ciclo es infinito, por lo que nunca se completa.
En lugar de eso, poner el ciclo dentro de setInterval() hará el trabajo. Vamos a probar esto:
const contentsDownDate = document.querySelectorAll(".countDown"); nbElement = contentsDownDate.length-1; var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime(); // Update the count down every 1 second x = setInterval(function() { for (i=0; i<=nbElement; i++){ // 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="demo" contentsDownDate[i].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); contentsDownDate[i].innerHTML = "EXPIRED"; } } }, 1000);