将onclick功能设置为 <li> 元件

Question

I am trying to dynamically add onclick function to "li" tagged elements. But the event does not fires. Here is my code:

var arrSideNavButtons = [];
var sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'); 
var arrayOfSceneAudios = [scene1Audio, scene2Audio,...];

for (var i = 0; i < sideNavLi.length; i++) {
    sideNavLi[i].onclick = function() {
        arrayOfSceneAudios[i].play();
    }
    arrSideNavButtons.push(sideNavLi[i]);
}

Is it possible to code it this way? If yes, what is my mistake? Thanks a lot.

Answer 1

Wrap your onclick handler in a closure, else it only get assigned to the last elem in the loop:

for (var i = 0; i < sideNavLi.length; i++) {
    (function(i) {
        sideNavLi[i].onclick = function() {
            arrayOfSceneAudios[i].play();
        }
        arrSideNavButtons.push(sideNavLi[i]);
    })(i)
}

Answer 2

I think it's better to reuse one single function, instead of creating a new one at each iteration:

var arrSideNavButtons = [],
    sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'),
    arrayOfSceneAudios = [scene1Audio, scene2Audio,...],
    handler = function() {
        this.sceneAudio.play();
    };

for (var i = 0; i < sideNavLi.length; i++) {
    sideNavLi[i].sceneAudio = arrayOfSceneAudios[i];
    sideNavLi[i].onclick = handler;
    arrSideNavButtons.push(sideNavLi[i]);
}