Question

我有以下javascript代码，它正在我正在处理的网站上进行图像轮换。它在Firefox中正常运行，但在Chrome或Safari中无效。

当我在firebug中运行脚本控制台时，它没有发现错误，但是当我在Chrome中运行脚本控制台时，它会返回错误：Uncaught TypeError：无法设置未定义的属性'src'

错误位于第38行，靠近底部，文档[place] .src = new_image（）;

我刚开始理解javascript，虽然我已经使用了很多脚本很长一段时间了。我想知道是什么导致脚本无法正常工作，以及我可以做些什么来使其工作。

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未捕获的TypeError：无法设置未定义的属性'src'

感谢您的帮助。

Answer 1

您的代码可以简单得多。 See it in action.

使用类似： 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

我看起来你应该能够将document[place].src更改为document.getElementById(place).src，然后只传入元素的ID，它应该可以正常工作。

我之前没有看到将文档对象用作数组，但使用getElementById方法是标准的，该方法将找到具有您提供的ID的DOM元素。一旦拥有了正确的DOM对象，其余代码就可以正常工作。

Answer 3

您想要在document[place].src = new_image;行中设置什么？看起来你实际上是在尝试设置HTML元素的属性（在这种情况下是一个图像）。为此，您应该使用document.getElementById("element_id")。

目前，这是正在发生的事情：在JavaScript中，数组表示法转换为点表示法，因此document[place]引用document的属性，其名称包含在变量{{1}中}。例如，如果place为place，则"hello"与document[place]相同，document.hello只是document对象的属性 - 它只是一个简单的您可以为其指定任何内容的变量 - 但它不是DOM的一部分。

未捕获的TypeError：无法设置未定义的属性'src'

3 个答案: