Uncaught TypeError: Cannot set property 'src' of undefined

Question

I have the following javascript code, which is doing an image rotation on a website I'm working on. It works correctly in Firefox, but not in Chrome or Safari.

When I run the script console in firebug, it doesn't find an error, but when I run the script console in Chrome, it comes back with the error: Uncaught TypeError: Cannot set property 'src' of undefined

the error is at line38, near the bottom, document[place].src = new_image();

I'm new to understanding javascript, although I've used various scripts for quite a while. I would like to know whats happening thats causing the script to not work, and what I could do to make it work.

var interval = 5; // delay between rotating images (in seconds)  
var random_display = 0; // 0 = no, 1 = yes  
interval *= 1000;  

var image_index = 0;  
image_list = new Array();  
image_list[image_index++] = new imageItem("images/banner/banner-1.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-1.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-2.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-3.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-4.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-5.jpg");  
image_list[image_index++] = new imageItem("images/banner/banner-6.jpg");  
var number_of_image = image_list.length;  
function imageItem(image_location) {  
this.image_item = new Image();  
this.image_item.src = image_location;  
}  
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {  
var range = y - x + 1;  
return Math.floor(Math.random() * range) + x;  
}  
function getNextImage() {  
if (random_display) {  
image_index = generate(0, number_of_image-1);  
}  
else {  
image_index = (image_index+1) % number_of_image;  
}  
var new_image = get_ImageItemLocation(image_list[image_index]);  
return(new_image);  
}  
function rotateImage(place) {  
var new_image = getNextImage();  
document[place].src = new_image;  
var recur_call = "rotateImage('"+place+"')";  
setTimeout(recur_call, interval);  
}  

/scripts/animation.js:38 Uncaught TypeError: Cannot set property 'src' of undefined

Thanks for your help.

Answer 1

Your code can be so much simpler. See it in action.

Use like: rotateImage("imageid");

var interval = 5; // delay between rotating images (in seconds)  
var random_display = 0; // 0 = no, 1 = yes  
interval *= 1000;

var image_list = [ 
  "images/banner/banner-1.jpg", "images/banner/banner-1.jpg", 
  "images/banner/banner-2.jpg", "images/banner/banner-3.jpg", 
  "images/banner/banner-4.jpg", "images/banner/banner-5.jpg", 
  "images/banner/banner-6.jpg"
];

var image_index     = image_list.length;
var number_of_image = image_list.length;

function generate(x, y) {
    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
    if (random_display) {
        image_index = generate(0, number_of_image - 1);
    }
    else {
        image_index = (image_index + 1) % number_of_image;
    }
    return image_list[image_index];
}

function rotateImage(place) {
    document.getElementById(place).src = getNextImage();
    setTimeout(function() {
        rotateImage(place);
    }, interval);
}

Answer 2

I looks like you should be able to change the document[place].src to document.getElementById(place).src then just pass in the ID of the element and it should work.

I've not seen using the document object as an array before but it is standard to use the getElementById method which will find the DOM element with the id you give it. Once you have the correct DOM object the rest of your code should work.

Answer 3

What exactly are you trying to set in the line document[place].src = new_image;? It looks like you're actually trying to set a property of a HTML element (an image in this case). To do that, you should be using document.getElementById("element_id").

At the moment, this is what is happening: in JavaScript, array notation translates to dot notation, so document[place] refers to a property of document whose name is contained in the variable place. For example, if place is "hello", then document[place] is the same as document.hello, which is just a property of the document object - it's just a simple variable to which you can assign anything you want - but it isn't part of the DOM.