如何在 JavaScript 的点击事件上添加 css class？

Question

I am trying to add a class to a anchor tag when clicked. But, I am getting "add" undefined when I try to use e.classList.add('active-link'); I'm trying to use the same method being used here .

const links = document.querySelectorAll('#navbar__list li a');
links.forEach(function(e) {
    // e.addEventListener('scroll', function() {
    //     e.preventDefault();
    //     for (let i = 0; i < links.length; i++) {

    //     }
    // });

    e.addEventListener('click', function(e) {
        // first remove active_link and active-section class from all a and section elements
        links.forEach(function(e) { 
            e.classList.remove('active-link');
            //console.log(`#section${e.id}`);
            //document.querySelector(`#section${e.id}`).classList.remove('active-section');
        })
        // add the active-class to the a element and active-section to the linked section
        e.classList.add('active-link');
       //document.querySelector(`#section${e.id}`).classList.add('active-section');
    })

});

Answer 1

You have the problem because e.addEventListener('click', function(e) ) the e is event Object, you need to replace this:

e.classList.add('active-link');
```
By this
```
e.target.classList.add('active-link');
```

Answer 2

Your e variable name is confusing: depending on the scope it could have three different values. Try this:

const links = document.querySelectorAll('#navbar__list li a');
links.forEach(function(link) {
    link.addEventListener('click', function(event) {
        // first remove active_link and active-section class from all a and section elements
        links.forEach(function(l) { 
            l.classList.remove('active-link');
        })
        // add the active-class to the a element and active-section to the linked section
        link.classList.add('active-link');
    })

});