Adding events to elements of an array

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?

If they are all supposed to do the same thing when you mouse over them then why not write one mouse over function and have them all reference the same function? It does not make sense to have a function inside of a for loop you don't need to create a dozen functions to do the same thing. Which is what your current code is doing. — Ryan
– Ryan, Commented Nov 11, 2011 at 18:18

Rob W · Accepted Answer · 2011-11-11 18:15:09Z

3

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
}

answered Nov 11, 2011 at 18:15

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding events to elements of an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related