0

I have a responsive navigation bar. On mobile view, when I click the hamburger the navbar-active class moves the navbar from

transform: translateX(-100%); to transform: translateX(0);

Now when I click on any anchor link, I want the navigation bar to go to back to transform: translateX(-100%);

So I made a function for it:

navLink.addEventListener('click', () => {
    nav.classList.remove('navbar-active');
});

But the console is showing:

navLink.addEventListener is not a function

Here is the HTML

<ul class = 'navbar'>
    <li class = 'nav-link'><a href = '#about' tabindex = '-1'>link-1</a></li>
    <li class = 'nav-link'><a href = '#ebooks' tabindex = '-1'>link-2</a></li>
    <li class = 'nav-link'><a href = '#blog' tabindex = '-1'>link-3</a></li>
</ul>

Here is the JavaScript

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.navbar');
    const navLink = document.querySelectorAll('.nav-link');

    burger.addEventListener('click', () => {
        nav.classList.toggle('navbar-active');
    });

    navLink.addEventListener('click', () => {
        nav.classList.remove('navbar-active');
    });
}

navSlide();

Things I tried to solve it:

  1. It works when I use const navLink = document.querySelector('.nav-link'); instead of const navLink = document.querySelectorAll('.nav-link'); but it works only on first element.

  2. I tried to add const navLink = document.querySelectorAll('.nav-link a'); but no luck again.

I'm a beginner in JavaScript. Any help would be appreciated. Thank you.

DMT
  • 51
  • 2
  • 9
  • [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) returns a list... you should loop through that list and access every single item returned from the selector. – Diego D Sep 01 '22 at 07:29
  • I tried this `navLink.addEventListener('click', () => { navLink.forEach((link) => { nav.classList.remove('navbar-active'); }); });` But, it didn't work. What am I doing wrong? – DMT Sep 01 '22 at 08:16
  • your `forEach` is iterating storing the i-th element on `link` variable but you are not using it and you indulge on using `nav` instead – Diego D Sep 01 '22 at 08:22
  • I didn't get you. I use `nav` there because I want to remove the `navbar-active` from `nav` when I click on the `navLink` – DMT Sep 01 '22 at 11:41
  • yes that part is actually correct indeed... the problem was keeping on using navLink like it was an element instead of a list as I suggested before. Its value is returned by querySelectorAll. If you followed the link I posted, you found exactly how to deal with the list it returns. Instead of calling addEventListener on the list you should call it on its items – Diego D Sep 01 '22 at 12:00
  • Hey, thank you. I solved it by: for(var i = 0; i < navLink.length; i++) { navLink[i].addEventListener('click', () => { nav.classList.remove('navbar-active'); burger.classList.toggle('toggle'); }) } I know it is hard to deal with newbies like me. Thank you for your help. You are a life savior. – DMT Sep 01 '22 at 13:18

0 Answers0