Javascript 未捕获的类型错误：无法设置未定义的属性“src”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3168517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot set property 'src' of undefined
提问by BlaineM
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.
我有以下 javascript 代码，它在我正在处理的网站上进行图像旋转。它在 Firefox 中正常工作，但在 Chrome 或 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
当我在 firebug 中运行脚本控制台时，它没有发现错误，但是当我在 Chrome 中运行脚本控制台时，它返回错误：Uncaught TypeError: Cannot set property 'src' of undefined
the error is at line38, near the bottom, document[place].src = new_image();
错误在第 38 行，靠近底部，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.
尽管我已经使用了很长一段时间的各种脚本，但我对 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 Uncaught TypeError: Cannot set property 'src' of undefined
/scripts/animation.js:38 未捕获的类型错误：无法设置未定义的属性“src”
Thanks for your help.
谢谢你的帮助。
采纳答案by gblazex
Your code can be so much simpler. See it in action.
您的代码可以简单得多。 看到它在行动。
Use like: rotateImage("imageid");
使用类似：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);
}
回答by casablanca
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").
你到底想在行中设置document[place].src = new_image;什么？看起来您实际上是在尝试设置 HTML 元素（在本例中为图像）的属性。为此，您应该使用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 documentwhose name is contained in the variable place. For example, if placeis "hello", then document[place]is the same as document.hello, which is just a property of the documentobject - it's just a simple variable to which you can assign anything you want - but it isn't part of the DOM.
目前，这就是正在发生的事情：在 JavaScript 中，数组表示法转换为点表示法，因此document[place]指的是document其名称包含在变量 中的属性place。例如，如果placeis "hello"，则document[place]与 相同document.hello，它只是document对象的一个属性——它只是一个简单的变量，你可以为它分配任何你想要的东西——但它不是 DOM 的一部分。
回答by Jeff Beck
I looks like you should be able to change the document[place].srcto document.getElementById(place).srcthen just pass in the ID of the element and it should work.
我看起来您应该能够更改为document[place].src，document.getElementById(place).src然后只需传入元素的 ID，它应该可以工作。
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.
我以前从未见过将文档对象用作数组，但使用 getElementById 方法是标准的做法，该方法将查找具有您提供的 id 的 DOM 元素。一旦你有了正确的 DOM 对象，你的其余代码就应该可以工作了。
