Q:

Javascript click to toggle start/resume fail.clearInterval not working

Hey I'm currently practicing jquery by building a time countdown which you can click to pause or resume.
But the clearInterval() is not working.
Everytime I click the circle it just creat a new countdown.I don't know why.
var status="pause";
var timeleft=1500;

$("#circle").click(function(){
    var timer;
    if(status==="pause"){
        status="start";
        alert(status);
         timer=setInterval(function(){
            $("#timer").text(Math.floor(timeleft/60)+":"+timeleft%60);      
            timeleft--;
        },1000);
    }
    else if(status==="start"){
        status="pause";
        alert(status);
        clearInterval(timer);
    }

});

A:

Your 'timer' variable is scoped inside the click handler.  This means a new one will be created every time.  To keep only a single one it should be scoped outside that handler.

A:

the timer variable needs to be in a parent scope so it retains its value through multiple clicks. What is the scope of variables in JavaScript?

var status="pause";
var timeleft=1500;
var timer;  //<----changed scope

$("#circle").click(function(){
    if(status==="pause"){
        status="start";
        alert(status);
         timer=setInterval(function(){
            $("#timer").text(Math.floor(timeleft/60)+":"+timeleft%60);      
            timeleft--;
        },1000);
    }
    else if(status==="start"){
        status="pause";
        alert(status);
        clearInterval(timer);
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="circle">start</button>
<div id="timer"><div>

