Javascript：無法使用getElementById獲取元素

好的。我需要新鮮的眼睛，因爲我仍然在這個問題上持續一個小時！Javascript：無法使用getElementById獲取元素

這裏是我的簡單的HTML代碼（testssio.html），其中包括JavaScript的腳本：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var ssio = document.getElementById('ssio'); 
     ssio.html = "it finally works!"; 
    </script> 
</head> 
<body> 
    <div id="ssio"></div> 
</body> 
</html>

但它不工作！使用調試器，我得到：

Uncaught TypeError: Cannot set property 'html' of null   /testssio/:6

有沒有人知道它？我知道這不是尋找調試幫助的正確位置，但如果我不明白，我會發瘋的！那麼請幫忙嗎？

Tahnks提前。

來源

2012-09-09 htaidirt

這樣做的原因是在頁面呈現前頭部的腳本加載。這意味着您的內容尚未呈現，因此不是document的一部分。

如果你想看到這項工作，請嘗試移動腳本下面的元素呈現，就像這樣：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div id="ssio"></div> 
<script type="text/javascript"> 
    var ssio = document.getElementById('ssio'); 
    ssio.innerHTML = "it finally works!"; 
</script> 
</body> 
</html>

這樣做的一個更加規範的方式是與事件。很多人使用jQuery，但它可以用普通的js來完成。這將意味着改變你的腳本是這樣的：

<script type="text/javascript"> 
    function WinLoad() { 
    var ssio = document.getElementById('ssio'); 
    ssio.innerHTML = "It finally works!"; 
    } 
    window.onload = WinLoad; 
</script>

這樣，你仍然可以把它留在<head>。

此外，使用.html是從jQuery。它通常用作.html(content)。如果您想使用純javascript版本，請使用.innerHTML = content。

我提到了jQuery，因爲它是一個高度使用的API。這句話是從他們的網站：

jQuery是一個快速，簡潔的JavaScript庫，它簡化了HTML文檔遍歷，事件處理，動畫，以及快速的Web開發Ajax交互。 jQuery旨在改變您編寫JavaScript的方式。

來源

2012-09-09 16:41:31

您的代碼在DOM加載之前運行得太早，因此document.getElementById()尚未在文檔中找到該元素。

您可以將腳本標記向下移動到</body>標記之前，也可以在使用window onload事件或DOMReady事件運行代碼之前等待DOM加載。

來源

2012-09-09 16:41:30 jfriend00

這裏有兩個錯誤。首先，您需要將SCRIPT標籤放在元素後面。其次，它不是.html，而是.innerHTML。因此，這裏是更正後的代碼：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div id="ssio"></div> 
     <script type="text/javascript"> 
     var ssio = document.getElementById('ssio'); 
     ssio.innerHTML = "it finally works!"; 
    </script> 
</body> 
</html>

來源

2012-09-09 16:44:44 rationalboss

你可以使用這樣的事情

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript"> 
    document.onload= function(){ 
    var ssio = document.getElementById('ssio'); 
    ssio.html = "it finally works!"; 
    } 
</script> 
</head> 
<body> 
<div id="ssio"></div>

來源

2012-09-09 16:45:45

Javascript：無法使用getElementById獲取元素

回答

相關問題