How can I integrate in fewer lines of code?

Question

I am new in JavaScript. I already have the functionality I wanted in my navigation menu, but I think in an incorrect way because I repeat code and I can't find the way to do it in less lines.

HTML:

<nav class="nav">
            <a href="#">
                <img src="" alt="">
            </a>
            <butoon class="toggle" aria-label="Abrir menú">
                <i class='bx bx-menu'></i>
            </butoon>
            <ul class="nav-menu">
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#">Inicio</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#acerca">Acerca de</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#eventos">Eventos</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#servicios">Servicios</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#resultados">Resultados</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#galeria">Galería</a></li>
                <li class="nav-menu-item"><a class="nav-menu-link nav-link nav-menu-link_active" href="#contacto">Contacto</a></li>
                </ul>          
        </nav>

JavaScript:

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");
const navItems = document.querySelectorAll(".nav-menu-item");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

navItems[0].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[1].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[2].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[3].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[4].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[5].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});
navItems[6].addEventListener("click", () => {

  navMenu.classList.toggle("nav-menu_visible");
});

Duplicate: [Attaching a click event to multiple elements at once?](https://stackoverflow.com/questions/34522988/attaching-a-click-event-to-multiple-elements-at-once) — , Sep 23 '21 at 18:10
Does this answer your question? [Adding click event listener to elements with the same class](https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class) — Amin Taghikhani, Sep 23 '21 at 18:10

Pietro Nadalini · Accepted Answer · 2021-09-23T18:11:51.253

You can write a simple for to add all the events you need

I added a background red on the class you're using as the toggle so you can see it works.

const navToggle = document.querySelector(".toggle");
const navMenu = document.querySelector(".nav-menu");
const navItems = document.querySelectorAll(".nav-menu-item");

navToggle.addEventListener("click", () => {
  navMenu.classList.toggle("nav-menu_visible");
});

for (let i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener("click", () => {
    navMenu.classList.toggle("nav-menu_visible");
  })
}

.nav-menu_visible {
  background-color: red
}

<nav class="nav">
  <a href="#">
    <img src="" alt="">
  </a>
  <butoon class="toggle" aria-label="Abrir menú">
    <i class='bx bx-menu'></i>
  </butoon>
  <ul class="nav-menu">
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#">Inicio</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#acerca">Acerca de</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#eventos">Eventos</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#servicios">Servicios</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#resultados">Resultados</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link" href="#galeria">Galería</a></li>
    <li class="nav-menu-item"><a class="nav-menu-link nav-link nav-menu-link_active" href="#contacto">Contacto</a></li>
  </ul>
</nav>

Please check for duplicates first. The chance that a beginner's question isn't a duplicate is essentially zero. — , Sep 23 '21 at 18:11
@ChrisG I didn't think of that, but I'll take it into account for next ones — Pietro Nadalini, Sep 23 '21 at 18:20

How can I integrate in fewer lines of code?

1 Answers1