CODEWITHSUNDEEP
javascriptsetintervalbuttonclickclearinterval
KButler
KButler

Reputation: 97

creating a simple stopwatch html

I have been working on this stopwatch now for 5-6 hours. It is meant to be a simple stopwatch html. I am simply not grasping the issues/concepts. I hoping for a little help as all the W3Schools pages I've looked at along with other stack overflow problems have not gotten me any where near where I need to be. I am trying to create 3 onclick buttons within the html to start, stop, and reset(haven't even got to the reset portion). The "clock" should start at 0 and when stopped, it should be paused at the number and only started again from the onclick start. Reset button resets to 0.

I have tried working with getElementById and innerHTML. I have gotten the button to work, but it was adding the "result" to itself 1,2,4,8, etc. I am sure it is a fairly simple fix, but I have tried different variations for hours upon hours.

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Stopwatch</title>
    </head>
    <body>
        <div>Seconds: <span id="time"></span></div>
        <input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
        <input type="button" id="stopTimer" value="Stop Timer"  onclick="stop();"><br/>
        <input type="button" id="resetTimer" value="Reset Timer"  onclick="reset();"><br/>
        <script src= "timer.js"></script>
    </body>
</html>
var timeElapsed = 0;
var myTimer = 0;

function start() {
    myTimer = setInterval(function(){
        timeElapsed += 1;
         document.getElementById("time").innerText = timeElapsed;
    }, 1000) ;

}
function stop() {
    clearInterval(myTimer);
}
function reset() {
   timeElapsed = 0;
   clearInterval(myTimer);
   document.getElementById("time").innerHTML = timeElapsed;
}

Upvotes: 1

Views: 9066

Answers (2)

njasi
njasi

Reputation: 21

You should not increment myTimer because it stores the value of the interval you'll need to stop later with clearInterval(myTimer). Instead you should have a variable like timeElapsed as @Programnik mentions in his comment.

Also keep in mind that any javascript not in a function in your timer.js file will be run as soon as it is loaded. This means the setInterval(start, 1000) will run right away. Instead you should have the setInterval in the call to start. Notice that this will make a new setInterval every time start is called. I'd recommend making a method named tick or something, so that your code functions a little like this:

var timeElapsed = 0;
var myTimer;

function tick(){
    timeElapsed++;
    document.getElementById("time").innerHTML = timeElapsed;
}
function start(){
    //call the first setInterval
    myTimer = setInterval(tick, 1000);
}
function stop(){
    clearInterval(myTimer);
}
function reset(){
    //some combination of tick and stop
}

You may notice that one could spam the start button and make the timer go really fast. This can be resolved if you initialize myTimer to something like -1 and then check if(myTimer == -1) when you try to start. You'll also have to reset myTimer to -1 in your stop method so the timer can be resumed. You may also want to do the same thing in the stop method.

To make the timer display 0 on startup you can just do this: <span id="time">0</span>

Hope this is helpful, this is my first answer on stack overflow in a long time

Edit: Here's the code I wrote when answering your question: 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Stopwatch</title>
    </head>
    <body>
        <div>Seconds: <span id="time">0</span></div>
        <input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
        <input type="button" id="stopTimer" value="Stop Timer"  onclick="stop();"><br/>
        <input type="button" id="resetTimer" value="Reset Timer"  onclick="reset();"><br/>
        <script>
            var timeElapsed = 0;
            var timerID = -1;
            function tick() {
                timeElapsed++
                document.getElementById("time").innerHTML = timeElapsed;
            }

            function start() {
                if(timerID == -1){
                    timerID = setInterval(tick, 1000);
                }
            }

            function stop() {
                if(timerID != -1){
                    clearInterval(timerID)
                    timerID = -1
                }
            }

            function reset() {
                stop();
                timeElapsed = -1;
                tick()
            }
        </script>
    </body>
</html>

Upvotes: 2

Programnik
Programnik

Reputation: 1555

Use another variable to log elapsed time: 

var timeElapsed = 0;
var myTimer = 0;

function start() {
    myTimer = setInterval(function(){
        timeElapsed += 1;
         document.getElementById("time").innerText = timeElapsed;
    }, 1000) ;

}
function stop() {
    clearInterval(myTimer);
}
function reset() {
   timeElapsed = 0;
   clearInterval(myTimer);
   myTimer = setInterval(start, 1000);
}

Upvotes: 1

Related Questions