Making play and pause function for a slidehow in Javascript. Having issues when clicking play twice, it will not pause the slideshow, need help.

the following are the instructions are given by my instructor for the particular sections I am stuck on:

"Now the play button is working almost correctly. There is still one problem. Refresh your page. Click the Play button. Click the Play button again. Notice how you have two timers changing the picture. Now click the Pause button. Did the slideshow pause? There is no way to pause the first slideshow. The first time you clicked the Play button a timed event was started and the information about the timed event was stored in the variable named timer. When you clicked Play again, a new timed event was started and the information to this second timed event was stored in the same variable named timer. The information for the first timed event is not stored anywhere, we do not have access to it. When you clicked the Pause button, it stopped the timed event stored in the variable timer (the second timed event.) Since no variable contains the information of the first timed event, there is no way to stop it. To fix this problem. There are a couple ways to do this. You can test to make sure timer==null before you start a new timed event (in the anonymous function.) Then set timer=null after you call the clearInterval function in the pauseSlideShow function. Or you can always call the clearInterval function before you start a new timed event (in the anonymous function.) This will clear any existing timer before starting a new one. Choose one of these approaches to fix the double Play problem.

^^How do I code it (and where in my code does it go?) so that the first timed event is cleared or stopped? so that if i click the play button twice it will still allow me to pause the slideshow.^^

Adding a Previous Button Now the only thing we are missing is a previous button. Add another button, give it a type, an id and put Previous between the opening and closing tags. Now we need an event listener for this button that will respond to the click event. Inside the addListeners function, use a call to the addEventListener function to add an anonymous function to this new button. Inside the anonymous function write code that will decrement index and change the image and the caption to the preceding image/caption in the array. Be sure to handle the slide transition when the Previous button is clicked at the first image. At this point, the function is to display the last image and matching caption. Click on the Prev button several times. Does the Prev button change the image and the caption as expected? If not, make changes until it does.

^^I have the button created but how do I code this (again where in my code will it be put?) so that it will go back to the previous image and caption associated with the image?^^

The following below is my code for my .html file:

Alligators

See the alligators

The following below is the code for my javascript file (.js):

window.addEventListener("load", addListeners);

var images = new Array("alligator.jpg", "beware.jpg", "fatBoy.jpg", "gatorEyes.jpg", "gatorGoing.jpg", "gatorRain.jpg");

var index = 0;

var timer;

var caption = new Array("See the Alligators", "Beware of this guy", "WOW!!! he's big", "Watching, waiting", "Off to something new", "it's raining, it's pouring");

function addListeners(){ document.getElementById("next").addEventListener("click", changeImage); document.getElementById("play").addEventListener("click", function(){ timer = setInterval("changeImage()",1000); }); document.getElementById("pause").addEventListener("click", pauseSlideShow); }

function changeImage() { index++; if (index == images.length) { //images.length reports how many elements are currently in the array, meaning not being limited to 4 or 6 elements index = 0; } document.getElementById("picture").src = images[index]; if (index == caption.length) { //caption.length reports how many elements are currently in the array, meaning not being limited to 4 or 6 elements index = 0; } document.getElementById("caption").innerHTML = caption[index]; } function pauseSlideShow(){ clearInterval(timer); }