I'm new to JavaScript. In the following code getElementsByName("li").length always returns 0 although there are many <li>-tags in my HTML, why?
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('li').length;
alert(len);
})
art of my HTML:
<body>
<ul>
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
</body>
On
The method you are attempting to use is trying to find a specific element by its name.
None of your list items have a name, to do this you should update your code so that your items have names.
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('list_item_1').length;
alert(len);
})
<li name="list_item1">aaaaaa</li>
You can do something like this because getElementsByTagName() returns NodeList so you can iterate over it like an array or get the length.
document.addEventListener('DOMContentLoaded', function() {
var listElements = document.getElementById('list').getElementsByTagName("li");
alert(listElements.length);
})<body>
<ul id="list">
<li >aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
</body>getElementsByName() although also returns NodeList but it returns list of all same name elements in the whole document so to make this work you need to give same name to all list items.
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('name').length;
alert(len);
});<body>
<ul>
<li name="name">aaaaaa</li>
<li name="name">bbbbbb</li>
<li name="name">cccccc</li>
</ul>
</body>
Replace
document.getElementsByName('li')with
document.getElementsByTagName('li')This is happening cause you are selecting by
tag nameand not byname! You are using wrong function!