Getting value from the custom nav bar-CodePudding

I'm working on the web page where I want to filter products by taking values from the nav bar using JS, like this:

<nav id="shop-nav" >
        <li> value="1">Something</li>
        <li> value="2">Something</li>
        <li> value="3">Something</li>
        <li> value="4">Something</li>
    </nav>

My JS code is:

for (let i = 0; i < categories.length; i  ) {
    const link = document.createElement('li')
    link.innerHTML = categories[i].name
    link.value = categories[i].id
    nav.appendChild(link)
}

I know that this is possible with <select></select> tag, but I want to do it with the custom nav bar. Thanks

CodePudding user response：

I ran the code you provided and there is an error having to do with categories. Where is categories coming from? Thanks!

Also, I made a small update in the HTML, below.

Blockquote Uncaught ReferenceError: categories is not defined

for (let i = 0; i < categories.length; i  ) {
    const link = document.createElement('li')
    link.innerHTML = categories[i].name
    link.value = categories[i].id
    nav.appendChild(link)
}

<nav id="shop-nav" >
        <li value="1">Something</li>
        <li value="2">Something</li>
        <li value="3">Something</li>
        <li value="4">Something</li>
    </nav>

CodePudding user response：

I may be misunderstanding please correct me if I am. But if you want to get the values from the navbar, you can use queryselector.

let navBarChildren = document.querySelector("nav[id='shop-nav']").children