Why my console log is returning HTMLCollection0?

Question

I trying to return that text inside of the list but instead Im getting htmlcollection0

my JS:

 Array.from(document.getElementById("main-menu").getElementsByTagName("li")).forEach(
        (x) =>
          (x.onclick = () =>
            console.log({
              event_name: "menu item clicked",
              menu_item: x.getElementsByTagName("li"),
            }))
      );

my html:

<div id="main-body">
      <ol id="main-menu">
        <li class="selected">Shop Spirits</li>
        <li>Shop Bourbon</li>
        <li>Shop Scotch</li>
        <li>Shop Rum</li>
      </ol>

Answer 1

x.getElementsByTagName('li') returns all the li elements nested inside x . There aren't any, so that returns an empty NodeList.

If you want to log the text of the clicked item, use x.innerText , there's no need to search for anything.

 Array.from(document.getElementById("main-menu").getElementsByTagName("li")).forEach( (x) => (x.onclick = () => console.log({ event_name: "menu item clicked", menu_item: x.innerText })) );

 <div id="main-body"> <ol id="main-menu"> <li class="selected">Shop Spirits</li> <li>Shop Bourbon</li> <li>Shop Scotch</li> <li>Shop Rum</li> </ol>