object HTMLcollection[0] keeps returning undefined

Question

Suppose we have something like:

<a href="1" class="my-list">1</a>
<a href="2" class="my-list">2</a>
<a href="3" class="my-list">3</a>

When I try something like

alert(document.getElementsByClassName("my-list"))

I get object HTMLCollection . And if I try something like alert(document.getElementsByClassName("my-list")[0]) I get undefined . How can I get the first href in the list? So it would be "1" in this case.

Answer 1

Check this in Fiddler . Place the document.getElementsByClassName("my-list") in a round bracket and the add the index [0] to it.

 **UPDATE**: Use `window.onload` to perform operations after all DOM elements are loaded. window.onload = function() { alert((document.getElementsByClassName("my-list"))[0]) }

 <a href="http//:www.google.com/" class="my-list">1</a> <a href="http//:www.facebook.com/" class="my-list">2</a> <a href="http//:www.sample.com/" class="my-list">3</a>

Answer 2

It could happen if you add the script in the HTML header. In this case, you saw HTMLCollection ; however, the items would be empty.

move the script to the bottom of the HTML body.

Answer 3

Also, just be sure to check your code, I had this problem from using querySelector. If you use querySelector it only returns one element (which will return undefined when iterating), while querySelectorAll creates a html collection which you can iterate through.