Question

我正在阅读关于事件处理程序的JavaScript课程，同时这样做我的基础是getElementById()。以下是我的HTML和JavaScript代码。以下代码也有图片标记，但我是SO的新用户，这就是为什么他们不允许我以精确的方式发布它们。因此，请将src标记视为完全投诉。

<div class="considerVisiting">
  <img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter"> 
</div>

这是JavaScript代码：

var myImage = document.getElementById("mainImage");
var imageArray = [images/1-btn, images/download-as-you-like];
var imageIndex = 0;

function changeImage() {

  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;

  if (imageIndex >= imageArray.length) {
    imageIndex=0;
  }
}

setInterval(changeImage, 5000);

此代码每5秒更改一次mainImage图片。但我面临的问题是，当我在Mozilla中使用FireBug运行此脚本时，它说：

 > Error : myImage is Null

并且没有任何关于脚本的事情。

Answer 1

更改：

<img src="images/bq-twitter" **id="mainImage"** alt="BeQRious Twitter" />

要：

<img src="images/bq-twitter" id="mainImage" alt="BeQRious Twitter" />

**无效。

Answer 2

如果没有指定id的元素存在，则

.getElementById()应该返回null，因此如果脚本在解析有问题的元素之前运行，那么您看到的行为是正确的。只是一个猜测，但你的文件的<head>中的脚本是什么？脚本（包括头部）在浏览器遇到它时运行，同时从上到下解析文档。您的脚本只能访问已经被浏览器解析过的元素，即文档中较高/较早的元素，因此如果您将<script>部分移动到正文的底部，它（显然）将会是你的元素，并将能够访问它们。

另一种方法是运行代码“onload”或文档的“document.ready”。 “onload”是浏览器仅在加载整个文档后才会执行的事件。

唯一突然出现错误的是这条线：

var imageArray= [images/1-btn,images/download-as-you-like];

我认为这是一个字符串数组，所以应该是这样的：

var imageArray= ["images/1-btn", "images/download-as-you-like"];

Answer 3

在您的代码中，数组中的值应该是字符串文字，即

> var imageArray = [images/1-btn, images/download-as-you-like];

应该是：

var imageArray = ['images/1-btn', 'images/download-as-you-like'];

另外，除非你有充分的理由，否则不要使用'setAttribute'。使用DOM属性而不是'setAttribute'在某些情况下是错误的并且不可靠。读取它也更自然，因为你真的试图设置DOM对象的属性，而不是HTML标记的属性，所以：

> myImage.setAttribute("src",imageArray[imageIndex]);

应该是：

myImage.src = imageArray[imageIndex];

此外：

> if (imageIndex >= imageArray.length) {
>   imageIndex=0;
> }

可以使用模数运算符％：

进行管理

  imageIndex = imageIndex % imageArray.length;

整个功能可以简化为：

function changeImage() {
  myImage.src = imageArray[index++ % imageArray.length];
}

您还可以使用闭包删除全局变量：

var changeImage = (function() {

    var myImage = document.getElementById("mainImage");
    var imageArray = ['images/1-btn', 'images/download-as-you-like'];
    var imageIndex = 0;

    return function () {
        myImage.src = imageArray[index++ % imageArray.length];
    }
}());

但是，您必须在之后运行上面的代码在DOM中存在id mainImage 的元素（例如，您无法从头部运行它）。最好使用 window.onload 来调用函数并传递id。

getElementById（）始终显示NULL状态

3 个答案: