Soy un principiante. Me gustaría crear una cuenta regresiva simple a partir de una matriz iniciada por un detector de eventos de botón. Quiero mostrar los elementos de la matriz después de un retraso en p class="countdownDisplay". Sin embargo, no funciona como yo quiero. No hay demora.
<p class="countdownDisplay"></p> <button>Start</button> let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let btn = document.querySelector("button"); let countdownDisplay = document.querySelector(".countdownDisplay"); btn.addEventListener("click", countdownFunction); function countdownFunction() { for (let i = 0; i < countdown.length; i++) { countdownDisplay.innerText = countdown[i]; console.log(countdown[i]); } } setInterval(countdownFunction, 5000);Si llama al ciclo for, agregará de 0 a 5 a la vez y su código no funcionará. Espero que el código comentado a continuación te ayude:
let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let btn = document.querySelector("button"); let countdownDisplay = document.querySelector(".countdownDisplay"); //declaring interval outside the function because we need to stop it at the end of counting let interval const startInterval = () => { interval = setInterval(countdownFunction, 1000); } btn.addEventListener("click", startInterval); //declaring the innitial value (first position of the array) let i = 0 function countdownFunction() { countdownDisplay.innerText = countdown[i++]; //if i is the last element of the array, stop the counting if(i==countdown.length) clearTimeout(interval) }Elimina el bucle "for" de countdownFunction() .
let countdown = ["5", "4", "3", "2", "1", "Time's up!"]; let i= 0; function countdownFunction() { console.log(countdown[i]) ++i; } setInterval(countdownFunction, 5000);Un poco tarde, pero aquí hay una solución con setTimeout. La ventaja de esta versión es que termina después de la cuenta regresiva y no continúa como con setInterval.
const countdown = ["5", "4", "3", "2", "1", "Time's up!"]; const countdownDisplay = document.querySelector(".countdownDisplay"); const button = document.querySelector("button"); function countdownFunction(i) { let _i = i++; setTimeout(() => { console.log(countdown[_i]) countdownDisplay.innerText = countdown[_i]; }, 1000 * _i, countdown[_i]); } button.addEventListener("click", () => { for(let i = 0; i<countdown.length; i++) { countdownFunction(i) } }); <p class="countdownDisplay">Click</p> <button>Start</button>