Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Bootstrap active class remove and add problem

so i want to add and remove active class from

  • tag i created with bootstrap, i have try with javascript method but it still not works. can anyone help my problem?

    here is my html code,

    
<div class="container-fluid">
  <div class="row flex-nowrap">
        <div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark " style="width: 250px;"> 
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> 
            <svg class="bi me-2" width="40" height="32"> </svg> <span class="fs-4">YooBudget</span> </a>
             <hr> 
             <ul class="nav nav-pills flex-column mb-auto"> 
              <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page"> <i class="fa fa-home"></i><span class="ms-2">Home</span> </a> </li>
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-first-order"></i><span class="ms-2">My Orders</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-cog"></i><span class="ms-2">Settings</span> </a> </li> 
              <li> <a href="#" class="nav-link text-white"> <i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span> </a> </li> </ul> 
              <hr> 
              <div class="dropdown"> <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong> John W </strong> </a> 
              <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> <li><a class="dropdown-item" href="#">New project</a></li> 
              <li><a class="dropdown-item" href="#">Settings</a></li> <li><a class="dropdown-item" href="#">Profile</a></li> 
              <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Sign out</a></li> </ul> </div>
        </div>

    and below is my javascript code

    const navLinkEls = document.querySelectorAll('.nav-link');

navLinkEls.forEach(navLinkEl => {
    navLinkEl.addEventListener('click', ()=> {
        if(document.querySelector('.active')) {
            classList.remove('active');
        }
        navLinkEl.classList.add('active');

    });


});
    • Tags:

    2

    Answers


    1. 0

      Your classList call is not attached to an element.
      Try this:

      const navLinkEls = document.querySelectorAll('.nav-link');

navLinkEls.forEach(navLinkEl => {
    navLinkEl.addEventListener('click', ()=> {
        document.querySelector('.active')?.classList.remove('active');
        navLinkEl.classList.add('active');
    });
});
      Login or Signup to reply.
    2. 0

      As the answer before this mentioned, your classList call is not attached to an element. But I believe the answer should look like this:

      const navLinkEls = document.querySelectorAll('.nav-link');

navLinkEls.forEach(navLinkEl => {
    navLinkEl.addEventListener('click', ()=> {
        if(document.querySelector('.active')) {
          let currentActive = document.querySelector('.active')
          currentActive.classList.remove('active');
        }
        navLinkEl.classList.add('active');

    });


});
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search