Javascript array is not recognizing called variable

Question

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    while (i <= image.length) {
        if (i > image.length) {
            i = 0;
        }

        i += 1;
        pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
        setTimeout('slideShow', 5000);
    }

}

I'm unsure why my i variable is not being recognized as the i variable from the rest of the function, so when ever I try to run my while loop it get's an error message saying that it's undefined.

Answer 1

I think you want setInterval instead of setTimeout , and you want you be careful that you increment i after you you update innerHTML .

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    setInterval(function () {
      if (i === image.length) { 
          i = 0;
      }
      pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
      i++;
    }, 5000)
}

slideShow();

Answer 2

You don't need a while loop. You don't need to reset i . You don't need to set innerHTML .

Click Run code snippet... to see how this works. More explanation below the code

 function slideShow(elem, images, delay, i) { elem.src = images[i % images.length]; setTimeout(function() { slideShow(elem, images, delay, i+1); }, delay); } // setup slideshow 1 slideShow( document.querySelector('#slideshow1 img'), // target element [ // array of images 'http://lorempixel.com/100/100/animals/1/', 'http://lorempixel.com/100/100/animals/2/', 'http://lorempixel.com/100/100/animals/3/', 'http://lorempixel.com/100/100/animals/4/', 'http://lorempixel.com/100/100/animals/5/', 'http://lorempixel.com/100/100/animals/6/' ], 1000, // 1000 ms delay (1 second) 1 // start on slide index 1 ); // setup slideshow 2 slideShow( document.querySelector('#slideshow2 img'), // target element [ // array of images 'http://lorempixel.com/100/100/nature/1/', 'http://lorempixel.com/100/100/nature/2/', 'http://lorempixel.com/100/100/nature/3/', 'http://lorempixel.com/100/100/nature/4/', 'http://lorempixel.com/100/100/nature/5/', 'http://lorempixel.com/100/100/nature/6/' ], 500, // 500 ms delay 1 // start on slide 1 ); 

 #slideshow1, #slideshow2 { width: 150px; display: inline-block; } 

 <div id="slideshow1"> <h2>Animals</h2> <p>(1000 ms delay)</p> <!-- initial image --> <img src="http://lorempixel.com/100/100/animals/1/"> </div> <div id="slideshow2"> <h2>Nature</h2> <p>(500 ms delay)</p> <!-- initial image --> <img src="http://lorempixel.com/100/100/sports/1/"> </div> 

This is a huge improvement because your slideshow function is reusable. It means you can use the same function for any slideshow you want. You can even run multiple slideshows on the same page, as I have demonstrated here.

Answer 3

setTimeout calls the function again so you're re-initializing i to 0 every time you call it. Since you can use setTimeout to call the function recursively you don't need the while loop. Pull i out of the function altogether and make it a global variable.

//i should be global 
var i = 0;

function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

    if (i >= image.length) {
        i = 0;
    }

    i += 1;

    pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';

    //set timeout is going to call slideShow again so if it's in the function it will call recursively, if you wanted to stop after a certain point you could nest setTimeout in an if
    setTimeout(slideShow, 5000);
}

//you need to initially call the function
slideShow();

Answer 4

As others have pointed out, the while loop is unnecessary and, as I pointed out, the setTimout was incorrectly written. The following simplifies your code significantly:

 var i = 0;
 function slideShow() {
     var pageSplash = document.getElementById('splash');
     var imageArray = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

     if(i < imageArray.length) {
         pageSplash.innerHTML = '<img title='+ imageArray[i] + ' id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + imageArray[i] + '">';
     }
     i++;
 }

 setInterval(slideShow, 2000);

See: https://jsfiddle.net/dauvc4j6/8/ for a working version.