Question

幻灯片可在Firefox中使用。它曾经在IE和Chrome中工作。现在我在IE和Chrome中都出现以下错误：

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

使用文档头中的<script type="...>链接脚本。

网页中的代码如下：

<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();">

函数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++;
}

Answer 1

确保在将runShow()元素添加到DOM后调用id="slide" 。

document.slide是document.getElementById("slide")的简写。当没有定义具有该id的元素时，后者将返回null。

Answer 2

必须在文档可以访问任何元素之前加载DOM。通常，当脚本位于<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++;
 }
};

“加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，并且所有图像和子帧都已完成加载。” -MDN

建议的改进

我想我会抛弃这一部分，因为我认为你可以在这方面改进一些事情，并决定提出一些建议。

让我们从您的代码中删除body onload="runShow()"，并将其设为<body>或其他任何类别等。
让我们进入并使用间隔而不是超时，因为对于长时间运行的过程，它们更准确。
另外，让我们尝试从回调中删除所有字符串。

示例：

<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>

Answer 3

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();
}

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

3 个答案: