How can i change html or javascript code, so when i click divs even it doesnt work .How can I fix it?

Question

So, I want to write js code for menubar in my page and it doesn't work Firstly, i think that i make some mistakes in div classes, such as places of div. Secondly, maybe i make mistake in JS code syntax but I look at console and there is not problem in debugging part. Also, in JS part i can access all classes which i write in js code

 let section2Menubar = document.querySelectorAll('section-2-menubar'); for(let i=0;i<section2Menubar.length;i++){ section2Menubar[i].addEventListener('click', () => { for(let j=0;j<section2Menubar.length;j++){ section2Menubar[j].children[0].classList.remove('menubar-options-active'); section2Menubar[j].children[1].classList.remove('menubar-triangles-active'); } section2Menubar[i].children[0].classList.add('menubar-options-active'); section2Menubar[i].children[1].classList.add('menubar-triangles-active'); }) }

 #section-2-main-menubar-articles{ margin: 48px 120px; display: flex; } .menubar-options { display: block; border: 1px solid #EBEBEB; padding: 20px 60px; margin-bottom: -3px; text-align: center; color: #717171; } .menubar-triangles { display: none; } .menubar-triangles-active { display: block; margin-left: 113px; } .menubar-options-active { background-color: #18CFAB; color: #ffffff; }

 <div id="section-2-main-menubar-articles"> <div class="section-2-menubar"> <div class="menubar-options-active menubar-options">Web Design</div> <img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Graphic Design</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Online Support</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">App Design</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Online Marketing</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options" class="menubar-triangles">Seo Service</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> </div> </div>

Answer 1

section-2-menubar of document.querySelectorAll method's arguments is present section-2-menubar element . Here, section-2-menubar is class . Therefore, you need to change section-2-menubar to .section-2-menubar .

let section2Menubar = document.querySelectorAll('.section-2-menubar'); // change
for (let i = 0; i < section2Menubar.length; i++) {
  section2Menubar[i].addEventListener('click', () => {
    for (let j = 0; j < section2Menubar.length; j++) {
      section2Menubar[j].children[0].classList.remove('menubar-options-active');
      section2Menubar[j].children[1].classList.remove('menubar-triangles-active');
    }
    section2Menubar[i].children[0].classList.add('menubar-options-active');
    section2Menubar[i].children[1].classList.add('menubar-triangles-active');
  })
}

 let section2Menubar = document.querySelectorAll('.section-2-menubar'); for (let i = 0; i < section2Menubar.length; i++) { section2Menubar[i].addEventListener('click', () => { for (let j = 0; j < section2Menubar.length; j++) { section2Menubar[j].children[0].classList.remove('menubar-options-active'); section2Menubar[j].children[1].classList.remove('menubar-triangles-active'); } section2Menubar[i].children[0].classList.add('menubar-options-active'); section2Menubar[i].children[1].classList.add('menubar-triangles-active'); }) }

 #section-2-main-menubar-articles { margin: 48px 120px; display: flex; } .menubar-options { display: block; border: 1px solid #EBEBEB; padding: 20px 60px; margin-bottom: -3px; text-align: center; color: #717171; } .menubar-triangles { display: none; } .menubar-triangles-active { display: block; margin-left: 113px; } .menubar-options-active { background-color: #18CFAB; color: #ffffff; }

 <div id="section-2-main-menubar-articles"> <div class="section-2-menubar"> <div class="menubar-options-active menubar-options">Web Design</div> <img class="menubar-triangles-active menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Graphic Design</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Online Support</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">App Design</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options">Online Marketing</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> <div class="section-2-menubar"> <div class="menubar-options" class="menubar-triangles">Seo Service</div> <img class="menubar-triangles" src="/hamStyle.css/imgs/Rectangle 60@1X.png"> </div> </div> </div>