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/

Does this answer your question? [How can I add and remove an active class to an element in pure JavaScript](https://stackoverflow.com/questions/38990163/how-can-i-add-and-remove-an-active-class-to-an-element-in-pure-javascript) — Terminat, Jan 01 '21 at 14:13

score 2 · Accepted Answer · answered Jan 01 '21 at 14:15

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>

cccn · Answer 2 · 2021-01-01T14:20:59.100

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>

Hi Bro @cccn. There is one small issue with this approach. If you click on the already active element. It is also toggled which should not happed. If clicked on the current active element it should be active.. :) — Imran Rafiq Rather, Jan 01 '21 at 14:24
@ImranRafiqRather yeah, true. I missed that in understanding the task — cccn, Jan 01 '21 at 14:36

Add/Remove class when clicking on element with pure JavaScript

2 Answers2