0

This question is about HTML with pure JavaScript (no jQuery or further technology).

I try to write by hand a file with a list of URLs which should appear as links. To reduce typing and avoid inconsistencies, I want to use JavaScript to take a list of li elements and translate it into li elements containing appropriate a elements with the URLs as href and as text.

Working in this direction, I have arrived at the following code, a bit condensed (no a elements) to show the issue at hand:

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body onload="linkify()">
<ul>
    <li href="https://stackoverflow.com/questions/5844732/getelementsbytagname-length-returns-zero" />
    <li href="https://stackoverflow.com/questions/26932862/why-does-document-getelementsbyname-have-a-length-of-0-despite-having-elements" />
    <li href="https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects" />
</ul>
<script>
function linkify () {
    let items = document.getElementsByName( "li" );
    for ( let i = 0; i < items.length; ++i ) {
        item = items.item( i );
        item.innerHTML = item.getAttribute( "href" );
    }
}
</script>
</body>
</html>

I expect the page to show a list of URLs. However, the list remains three empty list items, no URLs. The debugger tells me that let items = document.getElementsByName( "li" ); gets a 0 items.length object so that the for-loop does not do anything.

I would expect that linkify() is only called when the whole DOM has been loaded, so all three li elements should be found. Where is my error?

Bernhard Bodenstorfer
  • 860
  • 1
  • 8
  • 16
  • Use `querySelectorAll` instead of `getElementsByName`. `getElementsByName` doesn't do what you think it does. – Ram Feb 26 '22 at 09:17
  • 1
    `getElementsByName` matches elements with the `name` attribute. You're looking for `getElementsByTagName` or `querySelectorAll`. – Liftoff Feb 26 '22 at 09:17

2 Answers2

1

Simply the getElementsByName() method is not the right one.

returns a NodeList Collection of elements with a given name attribute in the document.(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName)

Here you don't have name attributes in your tags (li tags don't even accept name attributes)

What you need actually is the getElementsByTagName('li') method (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)

or the querySelectorAll('li') method (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

The former gives you a live node collection, the latter a not-live node collection.

cheesyMan
  • 1,494
  • 1
  • 4
  • 13
0

As an alternative you can try tag name :

let items = document.getElementsByTagName("li");
Met Br
  • 634
  • 5
  • 9
  • Strangely enough, this works. What does a tag name do that a name does not? – Bernhard Bodenstorfer Feb 26 '22 at 09:17
  • You did not defined a name attribute to your li elements maybe thats why it's not working :) Still you don't really need to name list elements in the page you can go from class or tag like this... https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp – Met Br Feb 26 '22 at 09:17