Is there a more effective way to write this code?

Question

So I have been trying to create some hover state animations in js on navigation links over the website. I used this code to do so and I am pretty sure there is a more effective way to do that. I would appreciate any input on this :)

const navItem = document.querySelectorAll(".navItem");
const navItemArray = Array.from(navItem);

navItemArray[0].addEventListener("mouseenter", hoverStateNav);
navItemArray[1].addEventListener("mouseenter", hoverStateNav);
navItemArray[2].addEventListener("mouseenter", hoverStateNav);
navItemArray[3].addEventListener("mouseenter", hoverStateNav);
navItemArray[4].addEventListener("mouseenter", hoverStateNav);
navItemArray[5].addEventListener("mouseenter", hoverStateNav);

navItemArray[0].addEventListener("mouseleave", hoverStateNav);
navItemArray[1].addEventListener("mouseleave", hoverStateNav);
navItemArray[2].addEventListener("mouseleave", hoverStateNav);
navItemArray[3].addEventListener("mouseleave", hoverStateNav);
navItemArray[4].addEventListener("mouseleave", hoverStateNav);
navItemArray[5].addEventListener("mouseleave", hoverStateNav);

function hoverStateNav() {
  console.log("hello");
  this.firstElementChild.classList.toggle("hoverLineActive");
  this.classList.toggle("bold");

How many of those elements are there? You want the listeners applied to only the first 6 or all of them?` — connexo, May 10 '21 at 09:24
https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation — Teemu, May 10 '21 at 09:30

score 1 · Answer 1 · answered May 10 '21 at 09:27

1

Just iterate over the collection of found items. The querySelectorAll method returns a NodeList object. Just use the forEach method, to add the event listeners.

const nodeList = document.querySelectorAll('.some-selector');
nodeList.forEach(element => {
    element.addEventListener('mouseleave', myFunc, false);
});

answered May 10 '21 at 09:27

Marcel

3,617
1
10
19

1

Thank you, Marcel! I used this solution and works perfectly :) – Ivan Lesko May 10 '21 at 14:06

score 0 · Answer 2 · answered May 10 '21 at 09:29

You could simply use forEach on querySelectorAll('.navItem'), then use addEventListener on each item, e.g.

document.querySelectorAll('.navItem').forEach(navItem => {
  navItem.addEventListener('mouseenter', hoverStateNav);
  navItem.addEventListener('mouseleave', hoverStateNav);
});

function hoverStateNav() {
  console.log("hello");
  //this.firstElementChild.classList.toggle("hoverLineActive");
  this.classList.toggle("bold");
}

<div class="nav">
  <div class="navItem">item</div>
  <div class="navItem">item</div>
  <div class="navItem">item</div>
  <div class="navItem">item</div>
  <div class="navItem">item</div>
  <div class="navItem">item</div>
</div>

score 0 · Answer 3 · answered May 10 '21 at 09:34

0


    document.querySelectorAll(".navItem").forEach((item) => {
        item.addEventListener("mouseenter", hoverStateNav);
        item.addEventListener("mouseleave", hoverStateNav);
    });

some browsers may not support the foreach on node list so use the array method or a simple for loop

answered May 10 '21 at 09:34

HijenHEK

944
2
10

Thank you for the input :) – Ivan Lesko May 10 '21 at 14:06

Is there a more effective way to write this code?

3 Answers3