how do i use querySelector the right way

Question

I want the navbar <ul> to disappear when I click it. With querySelectorAll() I selected all <li>s in the navbar. Then I added a click event listener to it. So when I click it, it should toggle the class of the navbar <ul> to "active" and then disappear.

It works with the toggle button but not with the <li>s.

<i id="togglebtn" class="fas fa-bars"></i>

<nav class="navbar">
    <div class="brand-title">brandName</div>
    <div class="navbar-links">
        <ul id="ul">
            <li class="jsscrolltrigger"><a href="#logo">Start</a></li>
            <li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
            <li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
            <li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
            </li>
        </ul>
    </div>
</nav>

<script type="text/javascript">
    var togglebtn = document.getElementById("togglebtn");
    togglebtn.addEventListener("click", function () {
        ul.classList.toggle("active");
    });
    // this following part doesnt work //
    // i want the ul(navbar) to disappear when i click it //

    var a = document.querySelectorAll(".jsscrolltrigger");
    var ul = document.getElementById("ul");
    a.addEventListener("click", function () {
        ul.classList.toggle("active");
    });
</script>

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Jul 29 '21 at 12:32

score 0 · Answer 1 · answered Jul 28 '21 at 18:09

querySelectorAll returns a NodeList. You have to iterate the list and add the event listener to every node.

For example:

var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click", function() {
  ul.classList.toggle("active");
});


var nodeList = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");

nodeList.forEach(node => {
  node.addEventListener("click", function() {
    ul.classList.toggle("active");
  });
})

<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
  <div class="brand-title">brandName</div>
  <div class="navbar-links">
    <ul id="ul">
      <li class="jsscrolltrigger"><a href="#logo">Start</a></li>
      <li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
      <li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
      <li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</a></li>
    </ul>
  </div>
</nav>

score 0 · Answer 2 · answered Jul 29 '21 at 12:45

When you use Document.querySelectorAll() It doesn't return a single element. It return a NodeList on which you can call forEach to loop through all of the item.

let a = document.querySelectorAll('.jsscrolltrigger');

let ul = document.getElementById("ul");

a.forEach(function(element) {
  element.addEventListener('click', function(e){
    e.preventDefault();
    ul.classList.toggle("active");
  });
});

.active {
  border: 2px solid red;
}

<nav class="navbar">
    <div class="brand-title">brandName</div>
    <div class="navbar-links">
        <ul id="ul">
            <li class="jsscrolltrigger"><a href="#logo">Start</a></li>
            <li class="jsscrolltrigger"><a href="#Galerie">Galerie</a></li>
            <li class="jsscrolltrigger"><a href="#Adresse">Anfahrt</a></li>
            <li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
            </li>
        </ul>
    </div>
</nav>

If you don't want to use forEach to perform the loop you can force the NodeList to be consider as an Array by passing it to the Array.from() method which allows you to perform any array operation on selected elements

Array.from(a).map(function(){ /*...*/ });
Array.from(a).filter(function(){ /*...*/ });

how do i use querySelector the right way

2 Answers2