Javascript array problem: Cannot read property 'src' of undefined

Question

This script has been running over at waterbirds.org for years. Now it's broken for some reason. It throws a "Cannot read property 'src' of undefined" error and I've tracked it down to preLoad[j].src (first line of runSlideShow function) as the problem because I can put a image link address there and it works. Any idea what's causing the problem?

// Waterbird Society Theme for Wordpress
// Rotating image banner applet
//
// Usage:
//<body onLoad='rotate_banner(slideShowSpeed, "Image1.jpg", "Image2.jpg"...)'>



var slideShowSpeed;
var j = 0;
var p;
var preLoad = new Array();

function rotate_banner() {
    var args = rotate_banner.arguments;
    slideShowSpeed = Number(args[0]);
    p = args.length;
    for (i = 0; i < p-1; i++) {
        preLoad[i] = new Image();
        preLoad[i].src = args[i+1];
    }
    runSlideShow();
}

function runSlideShow() {
    document.images['SlideShow'].src = preLoad[j].src;
    j++;

    if (j > (preLoad.length - 1)) j = 0;

    t = setTimeout('runSlideShow()', slideShowSpeed*1000);
}

When you are debugging, is it populating preLoad with values? Can you get a count of the number of images it contains? If that array is empty, indexing it will cause the error. — Tomas McGuinness
– Tomas McGuinness, Commented Aug 31, 2011 at 16:27

Georgii Ivankin · Accepted Answer · 2011-08-31 16:35:56Z

2

Everything is alright with your code except for it is run globally so all var declarations create global variables.

The exact issue on waterbirds.org is that j variable is defined somewhere before and by the moment it comes to preLoad[j] j equals 96, and preload[96] is really undefined.

Wrap your banner in anonymous self-executing function, for example, to make vars local, and you're done:

(function(){

var slideShowSpeed;
var j = 0;
var p;
var preLoad = new Array();

// to keep rotate_banner global, save it as a property of window object
window.rotate_banner = function() {
    var args = rotate_banner.arguments;
    slideShowSpeed = Number(args[0]);
    p = args.length;
    for (i = 0; i < p-1; i++) {
        preLoad[i] = new Image();
        preLoad[i].src = args[i+1];
    }
    runSlideShow();
}

function runSlideShow() {
    document.images['SlideShow'].src = preLoad[j].src;
    j++;

    if (j > (preLoad.length - 1)) j = 0;

    t = setTimeout('runSlideShow()', slideShowSpeed*1000);
}

})()

And remember: global variables are evil! =)

answered Aug 31, 2011 at 16:35

Georgii Ivankin

2,7122 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mike Szczys Over a year ago

Thanks, that fixed it! I did also need to make the other function global using the same method: window.runSlideShow() = function() { but now it works like a charm! I would love to upvote you, but apparently I can't until my reputation is at 15 or greater... sorry

Collectives™ on Stack Overflow

Javascript array problem: Cannot read property 'src' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related