Add/Remove class when clicking on element with pure JavaScript

Question

With a for loop, I removed the active class inside the a tag. However, when I want to add a class when clicking nothing happens and the class gets added to the li and a tag but without the active class name.

This has been asked so many times but I still cannot figure it out. Any help is appreciated. Thank you!

Here is the example: https://jsfiddle.net/fu5e7946/

Answer 1

Basically you are looping within your loop twice. I have fixed that. You simply need to remove the previous active class and add new one like this:

  document.querySelector(".sidenav a.active-list").classList.remove("active-list");
    e.target.classList.add('active-list');

You can this: codepen:link https://codepen.io/emmeiWhite/pen/jOMZRxd

 let elements = document.querySelectorAll('div, ul, li, a'); elements.forEach(i => { i.addEventListener('click', function(e) { document.querySelector(".sidenav a.active-list").classList.remove("active-list"); e.target.classList.add('active-list'); }); });

 .sidenav { width: 130px; position: fixed; z-index: 1; top: 20px; left: 10px; overflow-x: hidden; }.sidenav ul { background-color: black; list-style: none; padding: 0px; padding-right: 0px; }.sidenav > ul > li { color: white; margin: 0px; }.sidenav a { text-decoration: none; font-size: 18px; display: block; line-height: 4em; color: white; background-color: black; }.sidenav a:hover { color: grey; }.sidenav.active-list { background-color: #e2c9be; color: black; }

 <div id="active-buttons" class="sidenav" style="padding-top: 100px;"> <ul class="text-center"> <li> <a href="#Profile" class="active-list">Profile</a> </li> <li> <a href="#Experience">Experience</a> </li> <li> <a href="#Projects">Projects</a> </li> <li> <a href="#Skills">Skills</a> </li> </ul> </div>

Answer 2

Try with toggle (more info: MDN ). There you have working example:

 let elements = document.querySelectorAll('div, ul, li, a'); elements.forEach(i => { i.addEventListener('click', function() { i.classList.toggle('active-list'); }); });

 .sidenav { width: 130px; position: fixed; z-index: 1; top: 20px; left: 10px; overflow-x: hidden; }.sidenav ul { background-color: black; list-style: none; padding: 0px; padding-right: 0px; }.sidenav > ul > li { color: white; margin: 0px; }.sidenav a { text-decoration: none; font-size: 18px; display: block; line-height: 4em; color: white; background-color: black; }.sidenav a:hover { color: grey; } div ul li a.active-list { background-color: #e2c9be; color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="active-buttons" class="sidenav" style="padding-top: 100px;"> <ul class="text-center"> <li> <a href="#Profile" class="active-list">Profile</a> </li> <li> <a href="#Experience">Experience</a> </li> <li> <a href="#Projects">Projects</a> </li> <li> <a href="#Skills">Skills</a> </li> </ul> </div>