Uncaught TypeError: Cannot set property 'className' of undefined in js

Question

when I trying to add a classname into my js code which looks like this

var a = document.querySelectorAll('.nav-tabs');
    for(var i=0 ; i<a.length; i++){
    a[i].addEventListener('click',function(){
        a[i].classList.add("active");
    });
}

it show something like Uncaught TypeError: Cannot set property 'className' of undefined and my html looks like this

<nav>
    <div class="container" id="container">
    <ul class="nav nav-tabs">
         <li role="presentation"><a href="#">a</a></li>
         <li role="presentation"><a href="#">b</a></li>
         <li role="presentation"><a href="#">c</a></li>
    </ul>
    </div>
</nav>

I'll be so thankful if someone could help me solve this problem. Muchas gracis

Answer 1

var a = document.querySelectorAll('.nav-tabs');
for(var i=0 ; i<a.length; i++){
    a[i].addEventListener('click',function(){
        this.classList.add("active");
    });
}

Answer 2

The function you provide to addEventListener uses this to address the element itself. So you can simply write:

a[i].addEventListener("click",function(){
    this.classList.add("active");
});

Also, I think what you actually want is to add it to the li or a elements instead of the ul, so the selector should be the following:

document.querySelectorAll('.nav-tabs a');

Also, you probably want to remove the active class from the old element otherwise you eventually end up with all element having the active class.

var a = document.querySelectorAll('.nav-tabs a');
a.forEach(function(e){e.addEventListener('click',function(){
        var active = document.querySelector('.active');
        active && active.classList.toggle("active");
        this.classList.add("active");
    });
});

.active{
  color:red;
}

<nav>
    <div class="container" id="container">
    <ul class="nav nav-tabs">
         <li role="presentation"><a href="#">link a</a></li>
         <li role="presentation"><a href="#">link b</a></li>
         <li role="presentation"><a href="#">link c</a></li>
    </ul>
    </div>
</nav>

Answer 3

It looks like you're trying to add the class name to each <li> ?

The following will work:

var a = document.querySelector('.nav-tabs').children;
    for(var i=0 ; i<a.length; i++){
      console.log(i)
      console.log(a[i])
    a[i].addEventListener('click',function(){
        this.classList.add("active");
    });
}