Question

I’m having a bit of trouble calling the incrementer i in this loop in order to identify my current element. Firebug gives me the error "li[i].addEventListener is not a function".

document.addEventListener("DOMContentLoaded", function(){

var li = document.getElementsByTagName('li');

for(var i in li){
    li[i].addEventListener('click', function(){
        alert('yey');
    });
    }
});

The strange thing is if I call

alert(li[i].getAttribute('id')

I get the id alerted to me, but if I then use

var id=li[i].getAttribute('id');
document.getElementById(id).addEventListener(blah);

I get the same “is not a function” error. Is this a for in loop thing? I noticed that alert(i); called some extra stuff at the end of the loop, so is there a different way to use the incrementer in a for in loop? By the way the list I am using is thus:

<ul>
    <li id=pomp>
        stuff
    </li>
    <li id=and>
        and
    </li>
    <li id=circumstance>
        things
    </li>
</ul>

Answer 1

That is why you have to avoid using for in loop

for(var i=0;i<li.length;i++){
    li[i].addEventListener('click', function(){
        alert('yey');
    });
}

when you use for in, i is not an integer like you expect, instead it is a property of the nodelist.