javascript - GetElementsByTagName(tag).length

Question

我试图计算<li>-Listing 中的<ul>-Elements。我希望它像这样工作：

（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

编辑：啊，是的。我为你做了一个小提琴。

Answer 1

你的问题是这一行：

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

在你ul存在之前执行。将整个脚本移到您的下方</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

像这样尝试。当您的代码块呈现时，Listing 元素尚未准备好。

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