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?
This can be more easily accomplished using CSS:
nav>*:hover {
color: #ffbf00;
text-shadow: 0px 0px 20px #ffbf00;
}
As for your JS:
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.for (const element of elements) (instead of in).