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

回答

相關問題