Stop autoRun function until "start" button clicked

Question

I got some help earlier creating a pause button for my image slide show, and it seems to be working to a certain point.

The slideshow autoRun's when the "start" button is clicked. This was working fine until I played around with the code to get the pause button to work. Now the autoRun function starts when the page loads. Is there a way to stop this from happening, and for it to just start when I click my Start button? Cheers

The HTML

  <button onClick="autoRun()">Start</button>
  <button onClick="changeImage(-1); return false;">Previous Image</button>
  <button onClick="pause();">pause</button>
  <button onClick="changeImage(1); return false;">Next Image</button>

JavaScript

var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"];
var interval = setInterval("changeImage(1)", 2000);
var imageNumber = 0;
var imageLength = images.length - 1;

function changeImage(x) {
imageNumber += x;
// if array has reached end, starts over
if (imageNumber > imageLength) {
    imageNumber = 0;
}
if (imageNumber < 0) {
    imageNumber = imageLength;
}

document.getElementById("slideshow").src = images[imageNumber];

return false;
}

function autoRun() {
setInterval("changeImage(1)", 2000);

}

function pause(){
clearInterval(interval);
}

`Now the autoRun function starts when the page loads` - nothing in the code you posted would cause this - somewhere you must be running `autoRun()` ... solution, don't do that — Jaromanda X, Sep 01 '16 at 03:53
@JaromandaX autoRun only appears twice in all of the coding, which is in what i posted; once in the html with the start button, and the function itself within the javascript — B.Cx, Sep 01 '16 at 03:57
_"I got some help earlier creating a pause button for my image slide show, and it seems to be working to a certain point."_ Has previous Question been resolved? — guest271314, Sep 01 '16 at 04:01
oh FFS - autoRun isn't being executed, you've set an interval to do the stuff in the code `var interval = setInterval("changeImage(1)", 2000);` ... the rest of the code wont work properly if you stop then start, you wont be able to stop again ... if someone helped you write this in your previous question, they need shooting — Jaromanda X, Sep 01 '16 at 04:02
@JaromandaX That last sentence brought about a much needed smile. Though holes don't solve problems — guest271314, Sep 01 '16 at 04:03
@guest271314 - I hope it's not taken too badly, I'm sure the help given was as good as can be ... given the circumstances :p — Jaromanda X, Sep 01 '16 at 04:04
@JaromandaX http://stackoverflow.com/questions/39261749/pausing-a-function-onclick . Read earlier. Could not determine what expected result was. — guest271314, Sep 01 '16 at 04:05
@B.Cx fwiw, see [A: Pausing CSS animation with javascript and also jumping to a specific place in the animation](http://stackoverflow.com/questions/22080548/pausing-css-animation-with-javascript-and-also-jumping-to-a-specific-place-in-th/) , [Pause slide show on hover](http://stackoverflow.com/questions/38067566/pause-slide-show-on-hover/) — guest271314, Sep 01 '16 at 04:08
@JaromandaX _"I hope it's not taken too badly"_ Being permanently sacked for a possible error while trying to help? No, quite alright; builds character — guest271314, Sep 01 '16 at 04:10
`Being permanently sacked for a possible error while trying to help` - not sure how my job is on the line!!! :p — Jaromanda X, Sep 01 '16 at 04:11

score 1 · Answer 1 · answered Sep 01 '16 at 04:00

1

Please remove the following line of code and let me know if that helped var interval = setInterval("changeImage(1)", 2000);

answered Sep 01 '16 at 04:00

snit80

623
7
13

this actually answers the question ... the next problem will be that he wont be able to stop the slide show once started :p – Jaromanda X Sep 01 '16 at 04:06
What Jaromanda said, If I remove that line of code, It goes back to my original code that I had, which works fine, but then the pause button will no longer work, which puts me back to square one haha – B.Cx Sep 01 '16 at 04:15
Lol, ok you will need to do something like this 'var interval = setInterval("changeImage(1)", 2000);pause();' – snit80 Sep 01 '16 at 04:26
1

I was commenting about this fix ... it fixes the immediate issue without addressing any of the other issues within the posted code – Jaromanda X Sep 01 '16 at 04:31

score 0 · Answer 2 · answered Sep 01 '16 at 04:25

Declare interval as a variable, define interval within autoRun

<button onClick="autoRun()">Start</button>
<button onClick="pause(); changeImage(-1); autoRun();">Previous Image</button>
<button onClick="pause();">pause</button>
<button onClick="pause(); changeImage(1); autoRun();">Next Image</button>
<script>
  var images = ["HGal0.jpg", "HGal1.jpg", "HGal2.jpg", "HGal3.jpg", "HGal4.jpg", "HGal5.jpg", "HGal6.jpg", "HGal7.jpg", "HGal8.jpg", "HGal9.jpg", "HGal10.jpg", "HGal11.jpg", "HGal12.jpg", "HGal13.jpg", "HGal14.jpg", "HGal15.jpg"];
  var interval;
  // = setInterval("changeImage(1)", 2000);
  var imageNumber = 0;
  var imageLength = images.length - 1;

  function changeImage(x) {
    imageNumber += x;
    // if array has reached end, starts over
    if (imageNumber > imageLength) {
      imageNumber = 0;
    }
    if (imageNumber < 0) {
      imageNumber = imageLength;
    }

    //document.getElementById("slideshow").src = 
    console.log(images[imageNumber]);

    return false;
  }

  function autoRun() {
    interval = setInterval("changeImage(1)", 2000);
  }

  function pause() {
    clearInterval(interval);
    interval = null;
  }
</script>

Absolute legend, this worked perfectly. Is it possible for a quick explanation on what this is doing? Cheers. — B.Cx, Sep 06 '16 at 01:26
@B.Cx `interval` is declared outside of `autoRun` and defined when `autoRun` is called `interval = setInterval("changeImage(1)", 2000);`; `pause(); changeImage(-1); autoRun();` are all called for previous and image click, `pause(); changeImage(1); autoRun()` are all called for for next image click; at `pause()` clear interval and set interval to null `clearInterval(interval); interval = null;` — guest271314, Sep 06 '16 at 01:33

Stop autoRun function until "start" button clicked

2 Answers2