Estoy tratando de iniciar una función de cuenta regresiva con un detector de eventos porque en este momento se inicia automáticamente.
Encontré este código en algún lugar de la red y quiero ajustarlo a mis necesidades, pero necesito ayuda.
Supongo que setInterval debe ser el culpable. Supongo que ejecuta la función cada segundo, ¿verdad?
Pero quiero que comience cuando presiono el botón, así que puse setInterval dentro del cuerpo de updateCountdown pero comenzaron a suceder cosas extrañas (que el reloj comenzó a funcionar de manera irregular)
const startingMinutes = 25; let time = startingMinutes * 60; const startBtn = document.querySelector("#start-btn"); startBtn.addEventListener("click", updateCountdown); const countdownEl = document.querySelector("#countdown"); function updateCountdown() { const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? "0" + seconds : seconds; countdownEl.innerHTML = `${minutes}:${seconds}`; time--; } setInterval(updateCountdown, 1000); <div id="display-container"> <div id="display-timer"> <p id="countdown">25:00</p> </div> <p id="display-logo">Focus</p> </div> <div id="buttons-container"> <button id="reset-btn"> <i class="fas fa-undo-alt"></i></ion-icon> </button> <button id="start-btn"><i class="fas fa-play"></i></ion- icon></button> <button id="pause-btn"><i class="fas fa-pause"></i></ion-icon></button> </div>Parece que desea iniciar la cuenta regresiva solo cuando el usuario hace clic en el botón. En ese caso, use addEventListener para agregar una función que llame a setInterval , pasándole la función que realmente desea que se repita. Entonces se verá así:
const startingMinutes = 25; let time = startingMinutes * 60; const startBtn = document.querySelector("#start-btn"); startBtn.addEventListener("click", startCountdown); const countdownEl = document.querySelector("#countdown"); function updateCountdown() { const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? "0" + seconds : seconds; countdownEl.innerHTML = `${minutes}:${seconds}`; time--; } function startCountdown() { setInterval(updateCountdown, 1000); }Dejaré que usted resuelva los detalles más sutiles, como lo que debería suceder si el usuario hace clic en el botón por segunda vez.