Question

I am trying to get an element’s index number while onmouseover.
I can do this easily with jQuery but native javascript is bulletproof /:

Here is jsFiddle

var ele = document.getElementsByClassName('sample')[0];

for(i=0; i<ele.children.length;i++){
    ele.children[i].onmouseover = function() {
        this.style.background='red';
        alert(i);//can't get the value
    }
}

<ul class="sample">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

That’s because i was overridden already, store it in an attribute:

ele.children[i].onmouseover = function() {
    this.style.background='red';
    alert(this.getAttribute('data-index'));
};
ele.children[i].setAttribute('data-index', i);

DEMO

Or use a closure:

ele.children[i].onmouseover = (function (index) {
    return function () {
        this.style.background = 'red';
        alert(index);
    };
}(i));

DEMO