GetElementsByTagName（tag）.length

Question

我試着計算<li> -Elements在<ul>之間。我預料到這樣的工作：

（JavaScript的）：

var ul = document.getElementById('listing'); 
function countLi(){ 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
} 

（HTML中）：

<input type="button" onclick="countLi()" value="Count the Li's!"/> 
<ul id="listing"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul>​ 

它告訴我，說： 「UL爲空」。那麼我的錯在哪裏？

親切的問候， vogti

編輯： 啊，是啊。 I did a Fiddle for you。

Answer 1

你的問題是，這條線：

var ul = document.getElementById('listing'); 

正在執行的ul存在了。無論是移動你的整個腳本somewere下方的</ul>，把你的代碼在window.onload/$(document).ready回調，或者乾脆轉移該行到您的功能（這也將讓您的ul變量局部範圍以該功能）：

function countLi(){ 
    var ul = document.getElementById('listing'); 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
} 

Answer 2

嘗試像這樣。當您的代碼塊呈現時，未準備好就緒元素。

function countLi(){ 
    var ul = document.getElementById('listing'); 
    alert("There are "+ul.getElementsByTagName('li').length+" Li-Elements in this Documnet!"); 
    }