Js Stopwatch dont start again once i reset

69 Views Asked by At

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

2

There are 2 best solutions below

0
yograj tandel On BEST ANSWER

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.

0
Hoang Son On

In the resetCron function, you set document.getElementById('watch').innerText = 00:00:00, this changed whole elements inside, it should be:

function resetCron() {
        clearInterval(interval);
        hund = 0;
        sec = 0;
        min = 0;
        document.getElementById('watch').innerHTML='<span id="minutes">00</span>:<span id="seconds">00</span>:<span id="hundredths">00</span>';
    }