CODEWITHSUNDEEP
javascript
Kurt Camarines
Kurt Camarines

Reputation: 11

How can I make my script loop and check all buttons that are active? vanilla js

The buttons already close when you click it again but I can't figure out how to make it check all the other buttons and remove all "active" classes.

Apologies if its a dumb question but thanks anyways.

const openMenuButton = document.querySelectorAll('[data-modal-target]');

openMenuButton.forEach(button => {  
  button.addEventListener('click',() => {
    const modal = document.querySelector(button.dataset.modalTarget);
    swapMenu(modal);
  })
});

function swapMenu(modal) {
  const menuOpen = modal.classList.contains('menu-active');
  if(menuOpen == true) {
    modal.classList.remove('menu-active');
  } else {
    modal.classList.add('menu-active');
  };
}

Edit: https://jsfiddle.net/oqjz3fgy/5/ This is what im trying to do. I may have overcomplicated things. I only know basic javascript syntax prior to this.

Upvotes: 1

Views: 125

Answers (1)

MIARD
MIARD

Reputation: 126

I am sorry if I am wrong or not understand your question. However you can do this.

if your code like this:

     <div id = 'modal' or class = 'modal'>
       <button class ='menu-active'>click me </button>
       .....
       .....
     </div>

    
    function swapMenu(modal) {

       const menuOpen = document.querySelectorAll('#modal button'); // select all active menu
       
       for( let i = 0;i < menuOpen.length;i++){

              if(menuOpen[i].classList.contains("menu-active")){

                  menuOpen[i].classList.remove('menu-active');
              }
              else{
                   menuOpen[i].classList.add('menu-active');
               }
       }

Upvotes: 1

Related Questions