Estoy tratando de mostrar una cuenta regresiva desde 10 en mi HTML.
Esto proviene de un bucle for que disminuye desde 10.
El problema que tengo es que, dado que el ciclo cuenta regresivamente y se detiene en 0, el valor que estoy mostrando es el valor final en lugar de imprimir todos los valores (si eso tiene sentido).
¿Cómo puedo mostrarlos todos en mi HTML?
Código:
let countdown = 'Countdown 10'; for (let i = 10; i >= 0; i--) { if (i === 10) { countdown = 'Countdown 10'; } else if (i === 0) { countdown = 'Blast off!'; } else { countdown = i; } console.log(countdown); }; let output = document.querySelector('.output'); output.innerHTML = ''; const para = document.createElement('p'); para.textContent = countdown; output.appendChild(para);Estoy seguro de que puedo hacer algo con para.textContent, por ejemplo, ponerlo en el bucle. Pero no estoy seguro de cómo.
debe asignar el valor al elemento HTML y agregar ese elemento al documento dentro del bloque de bucle con un retraso
let delay = 300; let count = 10; const output = document.querySelector('.output'); const para = document.createElement('p'); output.appendChild(para); for (let i = count; i >= 0; i--) { let countdown = i; if (i === 10) { countdown = 'Countdown 10'; } else if (i === 0) { countdown = 'Blast off!'; } setTimeout(()=>{ para.textContent = countdown; }, (count - i) * delay) }; <div class="output"></div>Solo necesita configurar sus elementos primero, para que pueda escribirles en el camino. El uso de un ciclo for hará un ciclo tan rápido que no verá la cuenta regresiva, por lo que también muestro una versión alternativa usando setInterval, que le permite controlar el tiempo entre cada conteo.
let countdown = 'Countdown 10'; let output = document.querySelector('.output'); output.innerHTML = ''; const para = document.createElement('p'); output.appendChild(para); const para2 = document.createElement('p'); output.appendChild(para2); for (let i = 10; i >= 0; i--) { if (i === 10) { countdown = 'Countdown 10'; } else if (i === 0) { countdown = 'Blast off!'; } else { countdown = i; } para.textContent = countdown; //console.log(countdown); }; para2.textContent = 'Countdown 10' let i = 9, intv = setInterval(() => { if (i < 0) return clearInterval(intv); let countdown = i === 0 ? 'Blast off!' : i para2.textContent = countdown; i-- }, 1000) <div class='output'> </div>