Question

I am trying to create a simple image slideshow type thing with the Javascript code below, but what it is doing is displaying the first image in the webpage with everything else, then after 5 seconds clearing the page and displaying the same image, then again every 5 seconds except it doesn’t clear the page anymore.

The JavaScript:

var waiPics=new Array();
waiPics[0]='images/path.jpg';
waiPics[1]='images/gorse.jpg';
waiPics[2]='images/stream.jpg';
waiPics[3]='images/pines.jpg';
waiPics[4]='images/stump.jpg';

var time;

function timeUp() {
    delete document.write();
    nextPic();
}



function nextPic() {
    var picNum=0;
if (picNum = waiPics.length) {
    picNum=0;
}
else {
    picNum++;
} 
    document.write('<img src="'+waiPics[picNum]+'" title="Waipahihi" alt="Waipahihi">');
    time=setTimeout("timeUp()",5000);
}

The HTML:

<script type="text/javascript">
<!-- Begin
nextPic();
//  End -->
</script>

Im not very experienced with Javascript, so thanks in advance for the help.

Answer 1

picNum will always be zero because it is declared inside a function and will set to zero every time the function is called. Even if you fix this, your condition is wrong:

if (picNum = waiPics.length) {

The conditional should be:

if (picNum === waiPics.length) {

The single = sign assigns the length to picNum, then converts to a boolean. The array length is nonzero, so it becomes true value. It then resets to zero every time.

Consider using JSLint to check your code for errors and to suggest improvements. It flagged the issue:

"Expected a conditional expression and instead saw an assignment."
if (picNum = waiPics.length) {

In fact, after using JSLint on your code and examining its suggestions, I would use something more like this:

// New array creation syntax
var waiPics = ['images/path.jpg', 'images/gorse.jpg', 'images/stream.jpg', 'images/pines.jpg', 'images/stump.jpg'];

var picNum = 0;  // Declare outside inner function so its value is preserved
var myDiv = document.getElementById("ssdiv");  // Get a div element to insert picture into

function nextPic() {
    if (picNum === waiPics.length) {    // Proper comparison
        picNum = 0;
    } else {
        picNum += 1;
    }

    // Set picture into div element without evil document.write
    myDiv.innerHTML = '<img src="' + waiPics[picNum] + '" title="Waipahihi" alt="Waipahihi">';

    // No longer need timeUp; also don't use eval syntax
    setTimeout(nextPic, 5000);
}

Assigning innerHTML avoids various problems with document.write and also does not require your page to refresh to change slideshow images. Also note other comments.