使用 Onclick 调用嵌套的 function

Question

I want to implement a basic timer program that starts a 15 second timer on start button and stops on stop button

Here is what I have done so far

JS

 var timeleft = 15;
 function timer(){
 var downloadTimer = setInterval(function(){
    if(timeleft <= 0){
    clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
 } else {
   document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
 }
 timeleft -= 1;
  }, 1000);
  function timerstop(){
 clearInterval(downloadTimer);
  }
 }

HTML

<div id="countdown"></div>
<button onclick="timer();">start</button>
<button onclick="timerstop();">stop</button>

The reason I had to use the nested function approach was to access the variable downloadtimer, the start button works as expected but on clicking the stop button I get the following error

 Uncaught ReferenceError: timerstop is not defined

I would like to know if is this is a programming error or should I change my approach

Thanks in Advance

Answer 1

Move downloadTimer outside.

var timeleft = 15;
var downloadTimer;

function timer() {
    downloadTimer = setInterval(function () {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            document.getElementById("countdown").innerHTML = "Finished";
        } else {
            document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
        }
        timeleft -= 1;
    }, 1000);

}

function timerstop() {
    clearInterval(downloadTimer);
}