CODEWITHSUNDEEP
javascriptreturnexit
B.Cx
B.Cx

Reputation: 25

Using a return/stop function on click

Currently closee to finishing a slideshow using html and JavaScript. My last problem is creating stop button which needs to use a return function (I assume) Or some sort of exit function. It is an image slideshow that runs automatically, can be paused, skip image, go back an image and so on. I'd like the stop button to kill the autoRun function and set the image back to the first default image. I've set up a function which I'm guessing is totally wrong as it is not working.

The HTML

  <td class="controls">

  <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>
  <button onClick="Exit();">Exit</button>



  </td>

</tr>

All buttons are working besides the last one

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() {
interval = setInterval("changeImage(1)", 2000);

}

function pause(){
clearInterval(interval);
interval = null;
}

function Exit(){
return;
}

I'm not fully understanding the return statement in the Exit function, as most examples I've looked at run the function when an 'if' statement is met, whereas I'd like mine to execute when the Stop button is clicked. Thanks

Upvotes: 0

Views: 16507

Answers (1)

nnnnnn
nnnnnn

Reputation: 150040

A return statement simply exits the function in which it appears, it doesn't cause other things to stop. So this:

function Exit(){
return;
}

...has the same effect as this:

function Exit() { }

That is, the function doesn't do anything at all.

I'd like the stop button to kill the autoRun function and set the image back to the first default image.

OK, so have your Exit() function call your other functions:

function Exit() {
  pause();            // this will stop the slideshow
  imageNumber = 0;    // reset to the first image
  changeImage(0);     // change to that image
}

Upvotes: 2

Related Questions