Replacing active class using JavaScript not working properly

Question

When you select another link, it does not remove the active class. It also doesn't add the active class to the 'clicked' link.

Home is the default class and the third one is clicked.

I tried without the ";" at the end of the script but still shows the same.

Here's my code:

 let navItem = document.querySelectorAll('ul li'); navItem.forEach((item) => { item.addEventListener("click", () => { let activeClass = document.querySelector('.active'); activeClass.className = activeClass.className.replace(".active", ""); item.className = "active"; }); });

 .navItems { display: flex; list-style-type: none; }.navItem { margin: 0 10px; text-decoration: none; color: rgb(32, 32, 32); padding: 10px 20px; }.navbar.active { color: #e54136; background-color: rgb(32, 32, 32); }

 <div> <ul class="navItems"> <li><a href="#home" class="navItem active">HOME</a></li> <li><a href="#services" class="navItem">SERVICES</a></li> <li><a href="#projects" class="navItem">PROJECTS</a></li> <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li> <li><a href="#contact" class="navItem">CONTACT</a></li> </ul> </div>

Help me out!

Answer 1

There were a couple of problems with your code:

• in the CSS, you didn't create the correct selectors
• in the JavaScript you weren't modifying the correct elements

 let navItem = document.querySelectorAll('ul li a'); navItem.forEach((item) => { item.addEventListener("click", () => { document.querySelector('.active').classList.remove('active') item.classList.add('active') }); });

 .navItems { display: flex; list-style-type: none; }.navItem { margin: 0 10px; text-decoration: none; color: rgb(32, 32, 32); padding: 10px 20px; }.navItem.active { color: #e54136; background-color: rgb(32, 32, 32); }

 <div> <ul class="navItems"> <li><a href="#home" class="navItem active">HOME</a></li> <li><a href="#services" class="navItem">SERVICES</a></li> <li><a href="#projects" class="navItem">PROJECTS</a></li> <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li> <li><a href="#contact" class="navItem">CONTACT</a></li> </ul> </div>

Answer 2

If you want to use the replace() method with the current setup then these are the issues to be resolved from the code and it will work fine.

UPDATE: The problems with the code are:

1. You are not selecting the <a> tag when you have class navItem on <a> and then you are controlled the active class also on the <a> tag.

   let navItem = document.querySelectorAll('ul li a');

2. Second problem is in CSS. You have used.

    .navbar.active { /* which means when child of navbar is active */ color: #e54136; background-color: rgb(32, 32, 32);

   }

It should be:

.navItem.active {
   color: #e54136;
   background-color: rgb(32, 32, 32);
 }

3. Third problem is you have used replace() method to replace a className of .active which should actually be active only.

    activeClass.className.replace(" active", ""); // **NOTE:** There has to be a space at the start

4. Lastly you have to use += to update the new class active for new item to keep navItem class and also add active class on the clicked item.

MODIFIED CODE:

 let navItems = document.querySelectorAll('ul li a'); navItems.forEach((item) => { item.addEventListener("click", () => { let activeItem = document.querySelector('.active'); console.log(activeItem.textContent) activeItem.className = activeItem.className.replace(" active", " "); item.className += " active"; }); });

 .navItems { display: flex; list-style-type: none; }.navItem { margin: 0 10px; text-decoration: none; color: rgb(32, 32, 32); padding: 10px 20px; }.navItem.active { color: #e54136; background-color: rgb(32, 32, 32); }

 <div> <ul class="navItems"> <li><a href="#home" class="navItem active">HOME</a></li> <li><a href="#services" class="navItem">SERVICES</a></li> <li><a href="#projects" class="navItem">PROJECTS</a></li> <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li> <li><a href="#contact" class="navItem">CONTACT</a></li> </ul> </div>