getElementById() 始终显示 NULL 状态

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，因此如果脚本在解析相关元素之前运行，您所看到的行为是正确的。只是猜测，但您的脚本是否位于文档的 中？脚本（包括头部）在浏览器从上到下解析文档时遇到它时运行。您的脚本只能访问浏览器已解析的元素，即文档中较高/较早的元素，因此如果您将

另一种方法是在文档的“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;

整个函数可以减少to：

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。