Error encountered: Unable to assign a value to the property 'className' as it is undefined in JavaScript

Question

Error encountered: Unable to assign a value to the property 'className' as it is undefined in JavaScript

Having trouble adding a classname to my JavaScript code which looks like so:

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

An error message pops up saying Uncaught TypeError: Cannot set property 'className' of undefined and this is how my HTML appears:

<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 would greatly appreciate it if someone could assist me in resolving this issue. Thank you very much.

javascript html css

Answer 1

Answer №1

let navTabs = document.querySelectorAll('.nav-tabs');
navTabs.forEach(tab => {
    tab.addEventListener('click', () => {
        tab.classList.add("active");
    });
});

Answer 2

let navTabs = document.querySelectorAll('.nav-tabs');
navTabs.forEach(tab => {
    tab.addEventListener('click', () => {
        tab.classList.add("active");
    });
});

Answer 3

Answer №2

When using addEventListener, the function you provide uses this to refer to the element itself. You can simplify it like this:

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

In addition, it seems that you actually want to add the class to the li or a elements instead of the ul. Therefore, the selector should be:

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

You may also want to consider removing the active class from the previous element to avoid all elements ending up with 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 4

When using addEventListener, the function you provide uses this to refer to the element itself. You can simplify it like this:

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

In addition, it seems that you actually want to add the class to the li or a elements instead of the ul. Therefore, the selector should be:

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

You may also want to consider removing the active class from the previous element to avoid all elements ending up with 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 5

Answer №3

Are you attempting to assign a specific class name to each <li> element?

You can achieve this by using the following snippet:

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

Answer 6

Are you attempting to assign a specific class name to each <li> element?

You can achieve this by using the following snippet:

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

Error encountered: Unable to assign a value to the property 'className' as it is undefined in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript glitch preventing fancybox functionality in Firefox browser

Following its repair by my factory service, the data is now being shown complete with obvious HTML tags

Adding the !important rule in React inline CSS effortlessly

Text input setting for jQuery UI Slider

Attempting to mark fields as required with asterisks using React Final Form in a React project

Encountering a 404 error with Angular 6 routing after refreshing the page when using an Nginx proxy

NodeJS closes the previous server port before establishing a new server connection

What is the CSS technique for applying a gradient background color to an HTML element from the bottom to the top?

Utilize React-markdown to interpret subscript text in markdown format

Utilizing the correct method for binding checkboxes in Vue JS for effective two-way communication

What is the method to group a TypeScript array based on a key from an object within the array?

How jQuery Mobile Navbar behaves with 4 elements instead of 5

What is the best way to group Angular $http.get() requests for efficiency?

Table within a table does not occupy full height within a table cell

Learn the best way to send query parameters through the Next.js navigation router and take advantage of

Creating a structured layout with Bootstrap

Patience is key when waiting for the outcome of an async Javascript function in order to obtain a result (Could it be

Reloading specific content on an ASP.NET CORE Razor Pages website

"Vue is throwing an error because it cannot set the property '$offlineStorage' on an undefined object. How can this issue be resolved

Implement jQuery to toggle a class on click for added functionality