Check how many there are in a with javascript

Following my code:

HTML:

<ul id="ul_o">
<li>v1</li>
<li>v2</li>
</ul>

JavaScript
​x
 
<ul id="ul_o">
<li>v1</li>
<li>v2</li>
</ul>
​

JS:

console.log(document.getElementById("ul_o").getElementsByClassName("LI").length);

JavaScript
 
console.log(document.getElementById("ul_o").getElementsByClassName("LI").length);
​

Why the in the console there are the number 0 instead of 2?

Answer

Give – document.getElementById("ul_o").getElementsByTagName("li").length

To have a wider answer that ensures the dom is ready for being accessed and updated by JS, we can make use of the onreadystatechange event something like in html5 –

<html>
<head>
<title>Test</title>
</head>
<body>
<ul id="ul_o">
<li>v1</li>
<li>v2</li>
<li>v3</li>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    document.body.innerHTML = '<h4><code>ul</code> with <i>ul_o</i> has '+document.getElementById("ul_o").getElementsByTagName("li").length +' <code>li</code> Tags</h4>';
  }
}
</script>
</body>
</html>

JavaScript
 
<html>
<head>
<title>Test</title>
</head>
<body>
<ul id="ul_o">
<li>v1</li>
<li>v2</li>
<li>v3</li>
</ul>
<script type='text/javascript'>
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    document.body.innerHTML = '<h4><code>ul</code> with <i>ul_o</i> has '+document.getElementById("ul_o").getElementsByTagName("li").length +' <code>li</code> Tags</h4>';
  }
}
</script>
</body>
</html>
​

Fiddle

Advertisement

Answer