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" class="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
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" class="nav">
<li value="1">Something</li>
<li value="2">Something</li>
<li value="3">Something</li>
<li value="4">Something</li>
</nav>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