tratando de construir un pequeño programa de gimnasio de cuenta regresiva. Estoy tratando de darle al usuario la capacidad de ingresar un valor desde la entrada de texto y cuando el clic comienza, comienza la cuenta regresiva desde ese número. Estoy obteniendo mi valor. Configuré el inicio de sesión en la consola, pero ¿no se está volviendo a generar en el HTML interno?
¿pensamientos?
let startTimer; // buttons const start = document.getElementById('start'); const pause = document.getElementById('pause'); const reset = document.getElementById('reset'); start.addEventListener('click', initTimer); function initTimer(){ clearInterval(countDown) setInterval(countDown, 1000); } function countDown(){ const work = document.getElementById('work'); var workVal = work.value; work.innerHTML = workVal console.log(workVal) startTimer = workVal work.innerHTML = `${startTimer}` startTimer-- } <div class="timer"> <div class="numb"> <h1 class="timeNum"><input type='text' min="00" id="rounds" value="00">:<input type='text' min="00" id="work" value="00">:<input type='text' min="00" id="rest" value="00">:<input type='text' min="00" id="breaks" value="00"></h1> </div>necesita usar .value en lugar de .innerHTML .
luego debe mover el contador hacia afuera, para que pueda pausarlo/reanudarlo dinámicamente.
De la misma manera, debe realizar un seguimiento de las rondas y luego comenzar el intervalo de descanso.
let startTimer; // buttons const start = document.getElementById('start'); const pause = document.getElementById('pause'); const resume = document.getElementById('resume'); const reset = document.getElementById('reset'); start.addEventListener('click', initTimer); pause.addEventListener('click', pauseTimer); resume.addEventListener('click', resumeTimer); reset.addEventListener('click', resetTimer); let countDownInterval, restInterval, breakInterval; const work = document.getElementById('work'); const rounds = document.getElementById('rounds'); const rest = document.getElementById('rest'); const breaks = document.getElementById('breaks'); const status = document.getElementById('done'); function initTimer() { clearInterval(countDownInterval) countDownInterval = setInterval(countDown, 1000); status.innerText = ''; } function pauseTimer() { clearInterval(countDownInterval); } function resumeTimer() { countDownInterval = setInterval(countDown, 1000); } function resetTimer() { clearInterval(countDownInterval); work.value = '00'; status.innerText = ''; } function countDown() { var workVal = work.value; startTimer = workVal; startTimer--; console.log(workVal) if (startTimer < 1) { // check rounds, start breaks etc. work.value = '00'; clearInterval(countDownInterval); status.innerText = 'done'; } else { work.value = startTimer; } } <button id="start">start</button> <button id="pause">pause</button> <button id="resume">resume</button> <button id="reset">reset</button> <div class="timer"> <div class="numb"> <h1 class="timeNum"> <input type='text' min="00" id="rounds" value="00">: <input type='text' min="00" id="work" value="00">: <input type='text' min="00" id="rest" value="00">: <input type='text' min="00" id="breaks" value="00"></h1> </div> </div> <h1 id="done"></h1>