trying to build a little countdown gym program. I'm trying to give the user the ability to input a value from the text input and when the click start it begins to count down from that number. I'm getting my value I set logging to the console but it isn't outputting back into the innerHTML??
thoughts?
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>
you need to use .value instead of .innerHTML.
then you need to move the counter outside, so you can pause/resume it dynamically.
the same way you should track rounds, and then start rest interval
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>