querySelectorAll for multiple objects-CodePudding

I have this code, i need to change JS code for use it on all navigation class names. The purpose is to create a drop down menu but the javascript code takes only the first of the elements with class name navigation.

On inquiring I found out we need to use a querySellectorAll but I can't get it to work.

I give you below the code that works for only one object hoping someone will be able to show me how to use it for all objects with class name navigation. Thanks for your help.

let navigation = document.querySelector('.navigation');

navigation.onclick = function() {
  navigation.classList.toggle('active')
}

.active {
  color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>

CodePudding user response：

.querySelectorAll() gives you a list of elements. You need to iterate it.

let navigationItems = document.querySelectorAll('.navigation');

for (let navigation of navigationItems) {
  navigation.addEventListener('click', function() {
    navigation.classList.toggle('active');
  });
}

.active {
  color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>

CodePudding user response：

Use querySelectorAll instead of querySelector

let navigation = document.querySelectorAll('.navigation');

navigation.forEach(e=>{
e.onclick = function() {
  e.classList.toggle('active')
}
});

.active {
  color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>
<div >
  <ul>
    <span><i ></i></span>
    <span><i ></i></span>
    <span><i ></i></span>

    <div id="marker"></div>
  </ul>
</div>