How to get element by tag in javascript-CodePudding

I was trying to write JS code to highlight element when user hovers a cursor over it. To achieve it I am trying to add eventListener on every children on first tag "nav" in current document:

let navigation = document.getElementsByTagName("nav");
elements = navigation[0].children;

for (element in elements) {
  elements[element].addEventListener("mouseenter", function(event) {
    event.target.style.color = "#ffbf00";
    event.target.style.textShadow = "0px 0px 20px #ffbf00";
    setTimeout(function() {
      event.target.style.color = "";
      event.target.style.textShadow = "0 0 5px #a50068";
    }, 500);
  }, false);
}

But when I open it in browser, not only it does not work, but also Chrome says in DevTools that variable "navigation" is undefined. What am I doing wrong?

CodePudding user response：

It's possible that your HTML hasn't fully loaded. Try adding that code in an onl oad function to see if it fixes it. Or just put your script tag at the bottom of the HTML tag.

CodePudding user response：

This can be more easily accomplished using CSS:

nav>*:hover {
  color: #ffbf00;
  text-shadow: 0px 0px 20px #ffbf00;
}

As for your JS:

add type="module" or defer attribute to your <script> tags or your DOM won't be loaded when the script is executed and it won't find your nav element.
you should loop over the items using for (const element of elements) (instead of in).