alert() работает, когда elem.classList.add() не добавляет класс в элемент li

Question

Я хочу добавить класс к каждому li в #tabs_ul, когда он щелкнут, но он не работает. Я попытался увидеть, будет ли с alert() работать, и это действительно так. Почему это не так? Я изо всех сил, чтобы выйти из этой проблемы

<script> 
function clickme(){ 
var elem = document.getElementById('tabs_ul').querySelectorAll('li'); 
for(var f = 0; f < elem.length; f++){ 
elem[f].addEventListener('click', changeclass); 
}}; 

function changeclass(){ 
alert('cliccato'); // This is shown 
elem.classList.add('active_tab'); // This doesn't work 
}; 

addEventListener('load', clickme); 
</script> 

Вот код в теле

<div id="tabs"> 
<ul id="tabs_ul"> 
<li class=""><a href="#tabs-1"><strong>Description</strong></a></li> 
<li class=""><a href="#tabs-2"><strong>Gallery</strong></a></li> 
</ul> 
<div id="tabs-1"> 
</div> 
</div> 

Answer 1

elem не был определен в рамках changeclass

Вы можете использовать event.target вместо этого:

function changeclass(evt){ 
    evt.target.classList.add('active_tab'); 
}; 

В качестве альтернативы вы можете привязать элемент к функции:

for(var f = 0; f < elem.length; f++){ 
    elem[f].addEventListener('click', changeclass.bind(elem[f])); 
}}; 

function changeclass(){ 
    this.classList.add('active_tab'); 
};