Whitewolf3131
Whitewolf3131

Reputation: 79

The clearInterval does not work

var button1 = document.getElementById("start");
var button2 = document.getElementById("stop");
var timegraph = document.getElementById("ceas");
var time = 0;
var ResetStart = 0;
function Start(){
    if (ResetStart==0) {
        ResetStart=1;
        Running();
        button1.innerHTML="Pause";
    }
    else {
        ResetStart=0;
        button1.innerHTML="Resume";
        clearInterval(myInterval);
    }
}
function Reset(){
    time = 0;
    ResetStart = 0;
    button1.innerHTML="Start";
    timegraph.innerHTML="00:00:00:00";
}
function OnGoing(){
    time++;
    var hours = Math.floor(time/100/60/60);
    var minutes = Math.floor(time/100/60 % 60);
    var seconds = Math.floor(time/100 % 60);
    var hundreds = Math.floor(time/10 % 10);
    var thousands = time % 10;
    if (hours<10){
        hours = "0" + hours;
    }
    if (minutes<10) {
        minutes = "0" + minutes;
    }
    if (seconds<10) {
        seconds = "0" + seconds;
    }
    timegraph.innerHTML=hours + ":" + minutes + ":" + seconds + ":" + hundreds + thousands;
}
function Running(){
    if (ResetStart==1){
        var myInterval = setInterval (OnGoing , 10);
    }
    else {
        timegraph.innerHTML="00:00:00:00";
    }
}

This code is supposed to be a stopwatch. The problem is the clearInterval which doesn't work. The error in console i get when i press the second time the button with the id: "start" is:Uncaught ReferenceError: myInterval is not defined. When i press the second time on that button, the code stopwatch is supposed to stop.

Upvotes: 0

Views: 60

Answers (2)

Dr. Aaron Dishno
Dr. Aaron Dishno

Reputation: 1919

MyInterval only exists in the function. Put var MyInterval outside the function.

var button1 = document.getElementById("start");
var button2 = document.getElementById("stop");
var timegraph = document.getElementById("ceas");
var time = 0;
var ResetStart = 0;
var myInterval;

function Start(){
    if (ResetStart==0) {
        ResetStart=1;
        Running();
        button1.innerHTML="Pause";
    }
    else {
        ResetStart=0;
        button1.innerHTML="Resume";
        clearInterval(myInterval);
    }
}
function Reset(){
    time = 0;
    ResetStart = 0;
    button1.innerHTML="Start";
    timegraph.innerHTML="00:00:00:00";
}
function OnGoing(){
    time++;
    var hours = Math.floor(time/100/60/60);
    var minutes = Math.floor(time/100/60 % 60);
    var seconds = Math.floor(time/100 % 60);
    var hundreds = Math.floor(time/10 % 10);
    var thousands = time % 10;
    if (hours<10){
        hours = "0" + hours;
    }
    if (minutes<10) {
        minutes = "0" + minutes;
    }
    if (seconds<10) {
        seconds = "0" + seconds;
    }
    timegraph.innerHTML=hours + ":" + minutes + ":" + seconds + ":" + hundreds + thousands;
}
function Running(){
    if (ResetStart==1){
        myInterval = setInterval (OnGoing , 10);
    }
    else {
        timegraph.innerHTML="00:00:00:00";
    }
}

Upvotes: 0

Joseph
Joseph

Reputation: 119877

That's because myInterval is defined under Running. Remove the var and define it outside Running.

Upvotes: 5

Related Questions