ClearInterval не работает

Question

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

Этот код должен быть секундомером. Проблема заключается в том, что clearInterval не работает. Ошибка в консоли, которую я получаю, когда я нажимаю второй раз кнопку с идентификатором: «start»: Uncaught ReferenceError: myInterval не определен. Когда я нажимаю второй раз на этой кнопке, секундомер кода должен останавливаться.

Answer 1

Это потому, что myInterval определяется под Running. Удалите var и определите его за пределами Running.

Answer 2

MyInterval существует только в функции. Поместите var MyInterval вне функции.

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