CODEWITHSUNDEEP
javascripthtmltimer
Nick Zink
Nick Zink

Reputation: 47

Start and Stop timer not working

I am trying to make a timer that starts when you click the top button and stops and resets when you click the bottom button. Here is a link to my fiddle http://www.jsfiddle.net/AbrGL/

My HTML:

<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startclock()"/>
<div id="timer">0</div>
<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopclock()"/>

My JavaScript:

function startClock() {
    if (clicked === false) {
        clock = setInterval("stopWatch()", 1000);
        clicked = true;
    }
    else if (clicked === true) {
    }
}
function stopWatch() {
    sec+;
    document.getElementById("timer").innerHTML = sec;
}
function stopClock() {
    window.clearInterval(clock);
    sec = 0;
    document.getElementById("timer").innerHTML=0;
    clicked = false;
}

Upvotes: 1

Views: 14410

Answers (4)

user3184537
user3184537

Reputation: 1

Try this one :

http://tutorialzine.com/2015/04/material-design-stopwatch-alarm-and-timer/

this is the best i have ever used, you can make little changes accordingly if required.

Upvotes: -1

robin00212
robin00212

Reputation: 91

In the "stopWatch()" method, Replace sec+; with sec++;

I also found some typos, JavaScript is a CaSe SeNsitIvE language

Upvotes: 3

G&#246;khan Girgin
G&#246;khan Girgin

Reputation: 1164

I've made a few changes dom and js

HTML

<input type="button" id="start-clock" value="Click here to start timer"/>
<div id="timer">0</div>
<input type="button" id="stop-clock" value="Click here to stop and reset the timer"/>

JS

var clock;
var sec = 0;
document.getElementById("start-clock").addEventListener("click",function(){
 clock = setInterval(stopWatch,1000);
},false);
function stopWatch() {
    sec++;
    document.getElementById("timer").innerHTML = sec;
}

document.getElementById("stop-clock").addEventListener("click",function(){
 window.clearInterval(clock);
  sec = 0;
document.getElementById("timer").innerHTML=sec;
},false);

and have a look at jsFiddle

Upvotes: 2

Travis
Travis

Reputation: 12379

Ok you have a lot of typos.

First, sec+; does not do anything. It should be sec++;.

Second, your onClick properties point to startclock() and stopclock(), which should actually be startClock() and stopClock(). Function names are case-sensitive in JavaScript.

Third, the clicked variable is undefined so startClock() will never actually do anything. Add var clicked = false; before your function declarations.

Last but not least, sec is undefined, so incrementing it doesn't make sense. Add var sec = 0; before your function declarations.

HTML should look like

<input type="submit" id="start-clock" value="Click here to start timer" name="submit" onClick="startClock()"/>

<div id="timer">0</div>

<input type="submit" id="stop-clock" value="Click here to stop and reset the timer" name="submit" onClick="stopClock()"/>

and JavaScript should look like

var clicked = false;
var sec = 0;

function startClock() {
    if (clicked === false) {
        clock = setInterval("stopWatch()", 1000);
        clicked = true;
    }
    else if (clicked === true) {
    }
}

function stopWatch() {
    sec++;
    document.getElementById("timer").innerHTML = sec;
}

function stopClock() {
    window.clearInterval(clock);
    sec = 0;
    document.getElementById("timer").innerHTML=0;
    clicked = false;
}

Here is a working fiddle with the changes above: http://jsfiddle.net/AbrGL/8/

Upvotes: 10

Related Questions