'use strict'; var time = 0; var sec = 0; var min = 0; var hour = 0; var timer = 0; var timeSec = document.getElementById('sec'); var timeMin = document.getElementById('min'); var timeHour = document.getElementById('hour'); var pos = 0; function start() { var timeStart = Math.round((new Date()).getTime()/1000); var timerId = setInterval(function() { var timeNow = Math.round((new Date()).getTime()/1000); time = timeNow - timeStart; sec = time % 60; min = ((time - time % 60) / 60) % 60; hour = ((time - time % 3600) / 3600 ); // console.log(sec+" "+min+" "+hour); if (sec < 10) { timeSec.innerHTML = "0"+sec; } else { timeSec.innerHTML = sec; }; if (min < 10) { timeMin.innerHTML = "0"+min; }else { timeMin.innerHTML = min; } if(hour < 10) { timeHour.innerHTML = "0"+hour; } else { timeHour.innerHTML = hour; } } , 1000); } function reset() { clearInterval(timerId); time = 0; sec = "--"; timeSec.innerHTML = sec; timeMin.innerHTML = sec; timeHour.innerHTML = sec; } 
 <div class="container"> <div class="header">Секундомер</div> <div class="watch"> <h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> </div> <div class="buttons"> <button onclick="start()">Start/Stop</button> <button onclick="reset()">Reset</button> </div> <footer></footer> </div>

I do not understand what the problem is, why timerId undefined?

  • one
    Because timerId is declared inside the start function and exists only inside it - andreymal
  • Something I seem to be stupid, but does var make the variable global? - Tigran Vardanyan
  • one
    Quite the contrary, var creates a local variable in the place where it is declared - andreymal
  • Well, thanks. Those can not declare a variable in a function so that it can be seen from the outside? - Tigran Vardanyan
  • No But why, if you can create a variable in the global scope? By analogy with yours var time, var sec and so on - andreymal

2 answers 2

Make a timerId declaration, because this variable is local in the context of the start() function and does not pop up in the global scope.

Decision:

 'use strict'; var time = 0; var sec = 0; var min = 0; var hour = 0; var timer = 0; var timeSec = document.getElementById('sec'); var timeMin = document.getElementById('min'); var timeHour = document.getElementById('hour'); var pos = 0; var timerId; function start() { var timeStart = Math.round((new Date()).getTime() / 1000); timerId = setInterval(function() { var timeNow = Math.round((new Date()).getTime() / 1000); time = timeNow - timeStart; sec = time % 60; min = ((time - time % 60) / 60) % 60; hour = ((time - time % 3600) / 3600); // console.log(sec+" "+min+" "+hour); if (sec < 10) { timeSec.innerHTML = "0" + sec; } else { timeSec.innerHTML = sec; }; if (min < 10) { timeMin.innerHTML = "0" + min; } else { timeMin.innerHTML = min; } if (hour < 10) { timeHour.innerHTML = "0" + hour; } else { timeHour.innerHTML = hour; } }, 1000); } function reset() { clearInterval(timerId); time = 0; sec = "--"; timeSec.innerHTML = sec; timeMin.innerHTML = sec; timeHour.innerHTML = sec; } 
 <div class="container"> <div class="header">Секундомер</div> <div class="watch"> <h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> </div> <div class="buttons"> <button onclick="start()">Start/Stop</button> <button onclick="reset()">Reset</button> </div> <footer></footer> </div>

  • so how much time with 'use strict' var timerId does not make the variable global? - Tigran Vardanyan
  • The @TigranVardanyan case is not even in use strict, the timerId is just a local variable inside the start () function, with no declaration outside the function. - user192664
  • Why, I did not correctly understand the theory. That is, a function cannot declare a variable that would be visible from the outside? - Tigran Vardanyan
  • @TigranVardanyan read, I think help getinstance.info/articles/javascript/… - user192664

You need to output a var timerId outside of the start() function

 'use strict'; var time = 0; var sec = 0; var min = 0; var hour = 0; var timer = 0; var timeSec = document.getElementById('sec'); var timeMin = document.getElementById('min'); var timeHour = document.getElementById('hour'); var pos = 0; var timerId = ''; function start() { var timeStart = Math.round((new Date()).getTime()/1000); timerId = setInterval(function() { var timeNow = Math.round((new Date()).getTime()/1000); time = timeNow - timeStart; sec = time % 60; min = ((time - time % 60) / 60) % 60; hour = ((time - time % 3600) / 3600 ); // console.log(sec+" "+min+" "+hour); if (sec < 10) { timeSec.innerHTML = "0"+sec; } else { timeSec.innerHTML = sec; }; if (min < 10) { timeMin.innerHTML = "0"+min; }else { timeMin.innerHTML = min; } if(hour < 10) { timeHour.innerHTML = "0"+hour; } else { timeHour.innerHTML = hour; } } , 1000); } function reset() { clearInterval(timerId); time = 0; sec = "--"; timeSec.innerHTML = sec; timeMin.innerHTML = sec; timeHour.innerHTML = sec; } 
 <div class="container"> <div class="header">Секундомер</div> <div class="watch"> <h1><b id="output"><span id="hour">--</span>:<span id="min">--</span>:<span id="sec">--</span></b></h1> </div> <div class="buttons"> <button onclick="start()">Start/Stop</button> <button onclick="reset()">Reset</button> </div> <footer></footer> </div>