Js Stopwatch dont start again once i reset

Question

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

yograj tandel · Accepted Answer · 2023-02-09 04:10:33Z

0

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.

answered Feb 9, 2023 at 4:10

yograj tandel

1538 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SparkFountain · Accepted Answer · 2023-02-11 22:13:01Z

0

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>';
    }

edited Feb 11, 2023 at 22:13

SparkFountain

2,2701 gold badge18 silver badges37 bronze badges

answered Feb 9, 2023 at 4:10

Hoang Son

688 bronze badges

Collectives™ on Stack Overflow

Js Stopwatch dont start again once i reset

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related