Question

I´m trying to make a loop inside an array, and add events to its elements, not succeeding.
This is the array:

div_empresa_links_elements.push({
    div_mouseover: div_imagens_mouseover,
    div_submenu: div_empresa_imagens,
    div_txt: div_imagens_txt
}, {
    div_mouseover: div_institucional_mouseover,
    div_submenu: div_empresa_institucional,
    div_txt: div_institucional_txt
}, {
    div_mouseover: div_localizacao_mouseover,
    div_submenu: div_empresa_localizacao,
    div_txt: div_localizacao_txt
}, {
    div_mouseover: div_infraestrutura_mouseover,
    div_submenu: div_empresa_infraestrutura,
    div_txt: div_infraestrutura_txt
}, {
    div_mouseover: div_politicaDeQualidade_mouseover,
    div_submenu: div_empresa_politicaDeQualidade,
    div_txt: div_politicaDeQualidade_txt
}, {
    div_mouseover: div_linhaDoTempo_mouseover,
    div_submenu: div_empresa_linhaDoTempo,
    div_txt: div_linhaDoTempo_txt
}, {
    div_mouseover: div_historico_mouseover,
    div_submenu: div_empresa_historico,
    div_txt: div_historico_txt
})

This is the loop:

for (var i = 0; i < div_empresa_links_elements.length; i++) {
    var obj = div_empresa_links_elements[i]
    obj.div_mouseover.onmouseover = function () {
        obj.div_txt.style.opacity = 1
        obj.div_txt.style.filter = 'alpha(opacity = 100)'
        obj.div_submenu.style.opacity = .7
        obj.div_submenu.style.filter = 'alpha(opacity = 70)'
    }
}

The thing just works, if I put an event for each of the elements (_mouseover), by hand without a loop. Can anyone tell me why?

Answer 1

The issue is caused by a closure issue. Currently, obj is overwritten at each iteration. So, obj points to the lastly defined element. To fix this, wrap the the loop’s body in a self-invoking function, and pass the variable obj as an argument, as shown below:

 for (var i = 0; i<div_empresa_links_elements.length;i++){
    var obj = div_empresa_links_elements[i]
    (function(obj){ //obj is declared again. Inside this func, obj = <see below>
        obj.div_mouseover.onmouseover = function(){
            obj.div_txt.style.opacity = 1
            obj.div_txt.style.filter = 'alpha(opacity = 100)'
            obj.div_submenu.style.opacity = .7
            obj.div_submenu.style.filter = 'alpha(opacity = 70)'
        }
    })(obj); //Pass the variable obj as defined at the top
}