Select and add function to all links in a nav

April 12, 2023

I am trying to add a function to all of the links in my nav that will delay the link to the next page while the menu shuts using javascript.

This is my javascript, I know the querySelector part is wrong but I am unsure how to fix it;

document.querySelector(".nav-link-close").addEventListener("click", function (e) {
        e.preventDefault();
        console.log(e.target.href)
        toggleNav(false);
        setTimeout(() => {
            const nextPage = e.target.href;
            window.location.href = nextPage;
        }, 1000)
    });

Thank you in advance to anyone willing to help.

>Solution :

querySelector will get the first element with nav-link-close class, so you need to use querySelectorAll and loop through the elements and add the event.

const elements = document.querySelectorAll(".nav-link-close")
elements.forEach(element => {
  element.addEventListener("click", function (e) {
        e.preventDefault();
        console.log(e.target.href)
        toggleNav(false);
        setTimeout(() => {
            const nextPage = e.target.href;
            window.location.href = nextPage;
        }, 1000)
    });
})