getElementById（）总是显示NULL状态

我正在浏览有关事件处理程序的JavaScript课程，同时这样做我开始非常基本，它是getElementById()。以下是我的HTML和JavaScript代码。下面的代码也有图片标签，但我是新用户，所以他们不允许我以完全的方式发布它们。所以请考虑src标签完全投诉。getElementById（）总是显示NULL状态

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

此代码将改变mainImage图片每5秒。但我面临的问题是，当我在Mozilla运行使用Firebug这个脚本，它说：

> Error : myImage is Null

并没有什么关于脚本发生。

来源

2011-12-14 Abbas

在执行JavaScript之前，该元素是否存在于DOM *中？（请记住，JavaScript会在浏览器遇到它时立即运行），是否将它包装在一个`document.ready`事件处理程序中？或者尝试将JS放在页面底部的`script`块中？所以它在DOM放在一起后执行？ – 2011-12-14 23:28:03

你确定你的`img`元素（在你的soruce中）属性是`id`吗？ Internet Explorer有一个错误，它会匹配名称而不是ID，但其他浏览器会正确投诉。 – scunliffe 2011-12-14 23:29:15

变化：

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

要：

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

的**无效。

来源

2011-12-14 23:27:48 PriorityMark

可能，但我希望这只是强调`ID`属性的一种手段... – 2011-12-14 23:28:49

.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"];

来源

2011-12-14 23:53:20 nnnnnn

在你的代码中，数组中的值应该是字符串常量，即

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

应为：

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

另外，除非你有很好的理由，否则不要使用'setAttribute'。因为'setAttribute'在某些情况下是有问题且不可靠的，所以请使用DOM属性。它也更自然理解为你是真的想设置一个DOM对象，而不是HTML标记的属性的属性，所以：

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

应该是：

myImage.src = imageArray[imageIndex];

另外：

imageIndex = imageIndex % imageArray.length;

：

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

可使用模运算符％进行管理

全功能可以简化为：

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

但是，您必须元素后运行上面的代码与id mainImage存在于DOM（例如你不能从头开始运行）。最好调用该函数并使用window.onload来传递id。

来源

2011-12-14 23:54:27 RobG

getElementById（）总是显示NULL状态

回答

相关问题