未捕获的TypeError：无法设置未定义的属性“ src”
[英]Uncaught TypeError: Cannot set property 'src' of undefined
问题描述
url: http://www.gws-mbca.org 
网址： http ： //www.gws-mbca.org
The slide show works in Firefox. 幻灯片可以在Firefox中使用。 It used to work in IE and Chrome. 它曾经在IE和Chrome中运行。 Now I get the following error in both IE and Chrome: 现在，我在IE和Chrome中都收到以下错误消息：
Uncaught TypeError: Cannot set property 'src' of undefined
The script is linked using a <script type="...> in the document head. 该脚本使用文档头中的<script type="...>链接。
The code in the web page is as follows: 网页中的代码如下：
<section style="margin: 0 auto; text-align: center;">
<img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
</section>
<body onload="runShow();">
The function runShow is part of slideshow.js - Code is as follows: 函数runShow是slideshow.js的一部分-代码如下：
/* An automatically rotating slide show using Javascript and the DOM.
This script cobbled together by Paul D.J. Vandenberg */
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1;
var limit = pix.length - 1;
function runShow() {
if (index > limit) {
index = 0;
}
document.slide.src = pix[index];
setTimeout("runShow()", 10000);
index++;
}
3 个解决方案
解决方案1
0 2013-06-07 22:35:28
Make sure you call runShow() after the id="slide" element has been added to the DOM. 确保在将id="slide"元素添加到DOM 后调用runShow() 。
document.slide is shorthand for document.getElementById("slide") . document.slide是document.getElementById("slide")简写。 The latter will return null when no element with that id is defined. 如果未定义具有该ID的元素，则后者将返回null 。
解决方案2
0 2013-06-07 22:37:58
The DOM must be loaded before the document can access any elements. 必须先加载DOM，然后文档才能访问任何元素。 Usually an onload event is used when the script is in the <head> 通常，当脚本位于<head>时，将使用onload事件。
window.onload = function(){
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1;
var limit = pix.length - 1;
window.runShow = function() {
if (index > limit) {
index = 0;
}
document.slide.src = pix[index];
setTimeout("runShow()", 10000);
index++;
}
};
"The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." “加载事件在文档加载过程结束时触发。这时，文档中的所有对象都在DOM中，并且所有图像和子框架都已完成加载。” -MDN -MDN
Suggested improvements 建议的改进
I thought I would throw this part in because there are few things I think you can improve here as far as your approach and decided to offer some suggestions. 我认为我会投入这一部分，因为我认为您可以在此方面进行一些改进，并决定提供一些建议。
Lets remove
body onload="runShow()"from your code and make it just<body>or whatever other class etc you might have on there.让我们从代码中删除body onload="runShow()"并将其设置为<body>或任何其他可能存在的类。Lets also go in and use an interval instead of a timeout because for longrunning processes they are more accurate.
我们也可以使用间隔而不是超时，因为对于长时间运行的进程而言，它们更加准确。 Also, lets try to remove all strings from the callbacks.
另外，让我们尝试从回调中删除所有字符串。
Example: 例：
<html>
<head>
window.onload = function(){
var pix = [];//array to hold image source strings
var limit = 10;//0 based count for images
for( var i = 0; i < limit+1; i++ ){//runs 11 times
pix.push("rPix/rp"+(i+1)+".jpg";//push incrementally adds to pix array
}
var index = limit;//last index for image source in pix array
var slide = document.getElementById("slide");//cache slide image element
function runShow(){
if( index > limit ) index = 0;//cycle images by array length
slide.src = pix[index++];//change slide image using cached element
}
runShow();//run on load
setInterval(runShow,10000);//run every 10 seconds
};
</head>
<body>
<section style="margin: 0 auto; text-align: center;">
<img src="./rPix/rp1.jpg" id="slide" width="900" height="200" alt="slide show images" />
</section>
</body>
</html>
解决方案3
0 2013-06-09 16:23:11
So here's what the code looks like now.
/* An automatically rotating slide show using Javascript and the DOM.
This script cobbled together by Paul D.J. Vandenberg with a nice
assist from stackoverflow */
window.onload = function() {
var j = 1;
var pix = new Array(11);
for (i = 0; i < pix.length; i++) {
pix[i] = "rPix/rp"+j+".jpg";
j++;
}
var index = Math.floor(Math.random() * 11) + 1; // Start at a random slide
var limit = pix.length - 1;
var slide = document.getElementById("slide"); // Cache slide image element
function runShow() {
if (index > limit) {
index = 0;
}
slide.src = pix[index++];
}
setInterval(runShow, 10000); // Interval more reliable than timeOut
runShow();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.