cuando hago clic en mi botón, se supone que un temporizador muestra un temporizador de cuenta regresiva. Pero el botón no funciona.
let timerCounter = document.getElementById("timer-counter"); let timer; let timerCount; function startTimer() { timer = setInterval(function() { timerCount--; timerElement.textContent = "Time; " + timerCount; if (timerCount === 0) { clearInterval(timer); } }); } startButton.addEventListener("click", startTimer);Esto es lo que encontré hasta ahora:
timerCount , debe especificar el valor inicial para que funcione.timerElement en lugar de timerCounter que ha declarado.delay . const timerCounter = document.getElementById('timer-counter'); const startButton = document.getElementById('start-button'); let timer; let timerCount = 30; startButton.addEventListener('click', startTimer); function startTimer() { timer = setInterval(function () { timerCount--; timerCounter.textContent = 'Time; ' + timerCount; if (timerCount === 0) { clearInterval(timer); } }, 1000); } <div id="timer-counter"></div> <button id="start-button">Start</button>Aquí hay un enfoque ligeramente diferente que evita algunos de los problemas con las variables globales. La función que llama el oyente inicializa el conteo y luego devuelve una nueva función (un cierre) que se llama cuando se hace clic en el botón. También usa setTimeout , que encuentro más fácil de entender.
// Cache your elements const counter = document.querySelector('#counter'); const startButton = document.querySelector('button'); // Initialise your count variable function startTimer(count = 30) { // Return a function that is called from // the listener return function loop () { // Disabled the button once it's been clicked if(!startButton.disabled) startButton.disabled = true; counter.textContent = `Time: ${count}`; if (count > 0) { setTimeout(loop, 500, --count); } } loop(); } // Call startTimer to initialise the count, and return // a new function that is used as the listener startButton.addEventListener('click', startTimer(), false); <div id="counter"></div> <button>Start</button>Estoy seguro de que esto podría mejorarse.
const c = document.getElementById('timer-counter') const b = document.getElementById('start-button') let timer = false let timerCount = 30 b.addEventListener('click', start) function decrement() { if(timerCount < 0) { timerCount = 30 timer = false return } c.innerText = `Count: ${timerCount}` timerCount-- timer = setTimeout(decrement, 200) } function start() { if(timer) return decrement() } <div id="timer-counter"></div> <button id="start-button">Start</button>