How my I implement an interval pause and reset on the following script

Question

This is my JS:

var el, usr_t, split_list, mins, secs, countDown;

function counter() {

    el = document.getElementById("countdown");

    usr_t = document.getElementById("countdown").value;
    split_list = usr_t.split(":").map(Number);

    mins = split_list[0];
    secs = split_list[1];

    clearInterval(countDown);

    countDown = setInterval(function() {
        // initiating timer. (Zero-padding included)
        el.innerHTML = (mins + ":" + (secs.toString().length < 2 ? "0" + secs : secs));

        if (secs == 0) {
            mins--;
            secs = 60;
        }
        if(mins < 0) {
            clearInterval(countDown);
            el.innerHTML = ("DONE");
        }
        secs--;

    }, 1000);
}

function stopTimer() {
    clearInterval(countDown);
    document.getElementById("countdown").value = null;
    document.getElementById("countdown").innerHTML = ("Value");
    secsVal = null;
    minsVal = null;

    return;
}

var secsVal = -1, minsVal = -1;
function valueAssign(i) {

    if (secsVal == -1){
        secsVal = i;

        document.getElementById("countdown").innerHTML = (":" + secsVal);
        document.getElementById("countdown").value = (":" + secsVal);
        return;
    }
    else if (secsVal.toString().length == 1) {
        secsVal = "" + secsVal + i;
        secsVal = Number(secsVal);//finalizing secs value

        document.getElementById("countdown").innerHTML = (":" + secsVal);
        document.getElementById("countdown").value = (":" + secsVal);
        return;
    }
    else if ((minsVal == -1) && (secsVal.toString().length == 2)) {
        minsVal = i;

        var sv = secsVal.toString();
        document.getElementById("countdown").innerHTML = (Number(sv[0]) + ":" + Number(sv[1]) + minsVal);
        document.getElementById("countdown").value = (Number(sv[0]) + ":" + Number(sv[1]) + minsVal);
        return;
    }
    else if (minsVal != -1) {
        minsVal = "" + minsVal + i;
        minsVal = Number(minsVal);//finalizing mins value

        document.getElementById("countdown").innerHTML = (secsVal + ":" + minsVal);
        document.getElementById("countdown").value = (secsVal + ":" + minsVal);
        return;
    }
}

I tried to implement stopTimer(), and it does stop the time. But then if I remove minsVal and secsVal = null, the timer allows me to enter new values without clearing the old ones. I am confused. This is my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js_engine.js"></script>
</head>

<body>
        <div id="countdown" class="timer" style="border-style: solid; width:4em; font-size: 2em; text-align: center;">Value</div>

        <button type="button" id="start" value="start" onclick="counter();">Start</button>
        <button value="stop" id="stop" onclick="stopTimer();">Stop</button>
        <button value="addMin" id="addMin" onclick="addTime(this);">Add 1 min</button>
        <button value="pizza" id="pizza" onclick="addTime(this);">Pizza</button>
        <button value="soup" id="soup" onclick="addTime(this);">Soup</button>
            <br>

        <button value="1" id="1" onclick="valueAssign(1);">1</button>
        <button value="2" id="2" onclick="valueAssign(2);">2</button>
        <button value="3" id="3" onclick="valueAssign(3);">3</button>
            <br/>

        <button value="4" id="4" onclick="valueAssign(4);">4</button>
        <button value="5" id="5" onclick="valueAssign(5);">5</button> 
        <button value="6" id="6" onclick="valueAssign(6);">6</button>
            <br/>

        <button value="7" id="7" onclick="valueAssign(7);">7</button>
        <button value="8" id="8" onclick="valueAssign(8);">8</button>
        <button value="9" id="9" onclick="valueAssign(9);">9</button>
            <br/>

        <button value="0" id="0" onclick="valueAssign(0);">0</button>

        <audio>
            <source src="audio/ding.wav">
        </audio>
</body>
</html>

Possible duplicate of [How do I stop a window.setInterval in javascript?](http://stackoverflow.com/questions/7279567/how-do-i-stop-a-window-setinterval-in-javascript) — Heretic Monkey, Oct 24 '16 at 20:40
Your ass may very well be a duplicate, but your question is very poorly written, so it was quite difficult to understand what you were asking, but your title was clear that you wanted to stop and start an interval. — Heretic Monkey, Oct 24 '16 at 21:37
Especially the stop and reset part. THAT'S what I am mostly concirned with. — Rumen Hristov, Oct 24 '16 at 21:40
There's [How to pause and resume jquery interval](http://stackoverflow.com/q/29497601/215552), and [How to add Javascript “Stop” and “Reset” Button to the following:](http://stackoverflow.com/q/9220810/215552); both of which come from the Related links to the right of the question, and should have come up when you were typing the question title... — Heretic Monkey, Oct 24 '16 at 21:42

How my I implement an interval pause and reset on the following script

0 Answers0