How to make clearInterval function work

Question

I am an extreme newbie so apologies for an admittedly dumb question. But I have researched and tried several ways to make this function work and can't seem to get it. I am taking an online class and I am trying to build a simple app in which an image moves around the screen and the user tries to click it - and when they do click the image, the image disappears. I was able to construct the setInterval function but cannot get the clearInterval function to work.

(Apologies for admittedly political nature of code! Just a bit of US political humor. No offense intended!)

<h2>See if you can click on Hillary before she changes her position!</h2>

<p class="bold">This is your time:<span id="time">0</span>s</p>

<div id="box">

  <img src="images/hillary.jpg" style="width:100%; height:100%">    
</div>

<script type="text/javascript">


var time; var top; var left;

var makeBox; 

function makeBox() {

    time=Math.random();

    time=1000*time;

    setInterval(function () {

      top=Math.random();

      top=top*300;

      left=Math.random();

      left=left*1000;

      document.getElementById("box").style.top=top+"px";

      document.getElementById("box").style.left=left+"px";

      document.getElementById("box").style.display="block";

      createdTime=Date.now();

    },time);

}

makeBox();

function myStopFunction() {
  clearInterval(makeBox);
}

document.getElementById("box").onclick= function(){

  clearInterval(makeBox);

  this.style.display="none";


};

</script>

Justin

The `setInterval()` function returns a value. That value is what needs to be passed to `clearInterval()` in order to stop the timer. — Pointy, Feb 20 '16 at 14:53
Setting up a jsfiddle example (or similar) would help people debug this and assist you — millerbr, Feb 20 '16 at 14:56

score 1 · Answer 1 · answered Feb 20 '16 at 14:53

In order to clear a timer, you need to first store it. When you create your interval with setInterval you should store the return value of that in a variable. Then when you call your clearinterval, pass the variable in.

The following snippet of code includes what you need:

var myTimer;

function makeBox() {

    time=Math.random();

    time=1000*time;

    myTimer = setInterval(function () {

      top=Math.random();

      top=top*300;

      left=Math.random();

      left=left*1000;

      document.getElementById("box").style.top=top+"px";

      document.getElementById("box").style.left=left+"px";

      document.getElementById("box").style.display="block";

      createdTime=Date.now();

    },time);

}

makeBox();

function myStopFunction() {
  clearInterval(myTimer);
}

Thanks! I believe I understand now. Is the principle that anytime I create a function, I should also make that function a variable so that I can manipulate it later on? — Justin Call, Feb 22 '16 at 13:23
That's not required of functions, but it seems to be the preferred way of doing things although I don't know if there differences between naming a function or declaring it in a variable. — millerbr, Feb 22 '16 at 15:02

How to make clearInterval function work

1 Answers1