i start studying Js and i made this Stopwatch, but if i press reset, the stopwatch dont start again, unless i f5. I've tried some things but nothing seems to work, dont know what to do. I've seen others Js Stopwatch but they didnt help me to correct my mistake.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="cronometro.css">
<script src="cronometro.js"></script>
<title>Online Stopwatch</title>
</head>
<body>
<div class="main">
<header>
<p class="hText">Let's see your performance</p>
</header>
<div id="watch">
<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="hundredths">00</span>
</div>
<br>
<div class="buttons">
<button onclick="startCron()" > Start</button>
<button onclick="pauseCron()" > Pause</button>
<button onclick="resetCron()" > Reset</button>
</div>
</div>
</body>
</html>
var hund = 0;
var sec = 0;
var min = 0;
var interval
function clockDigits(digit) {
if (digit<10) {
return ('0' + digit)
} else {
return digit
}
}
function startCron() {
interval = setInterval(watchTime,10);
}
function pauseCron() {
clearInterval(interval)
}
function resetCron() {
clearInterval(interval)
hund = 0
sec = 0
min = 0
document.getElementById('watch').innerText='00:00:00';
}
function watchTime() {
hund++
document.getElementById('hundredths').innerText=clockDigits(hund);
if (hund==100) {
sec++
hund=0
document.getElementById('seconds').innerText=clockDigits(sec);
} if (sec==60) {
min++
sec=0
document.getElementById('minutes').innerText=clockDigits(min);
}
}
i try to call function startCron() inside resetCron(), but didnt work
on reset, you set the inner text of
document.getElementById('watch')
it replaces minutes, second, and hundredths span. because of that when you want to start the stopwatch again startCron does not find minutes, second, and hundredths span. that's why it gives an error.
replace document.getElementById('watch').innerText='00:00:00'; with
document.getElementById('minutes').innerText='00';
document.getElementById('seconds').innerText='00';
document.getElementById('hundredths').innerText='00';
and one more thing, disable the start button when the watch is started and enable it when the watch is paused or reset.