Indepent mouseover addEventListener in a Loop

Question

I want to add an "addEventListener" on all elements with the "object" class and that when the mouse goes over to change the edge of the object.

But I always select the last element in the loop.

There´s the code:

<div class='objeto' id='obj1'>obj1</div>
<div class='objeto' id='obj2'>obj2</div>
<div class='objeto' id='obj3'>obj3</div>
<script type='text/javascript'>
    var i;
    var objetos = document.getElementsByClassName('objeto');
    for (i = 1; i<objetos.length+1; i++){
         id = 'obj'+i; 
         document.getElementById(id).addEventListener('mouseover',function(){
                  borderObject(id);
         }, false);
    };
    function borderObject(id){ document.getElementById(id).style.border="4px solid red"; }
</script>

PD: I know that CSS exists: hover but I want to do it with Javascript

Mohamed Abbas · Accepted Answer · 2017-04-22T14:39:35.920

You need to pass the correct id to the function, this borderObject(id); always pass the last id, you need to pass the current clicked item.

Example

var i;
var objetos = document.getElementsByClassName('objeto');
for (i = 1; i < objetos.length + 1; i ++ ){
    id = 'obj'+i;
    document.getElementById(id).addEventListener('mouseover',function(e){
        borderObject(e.target.id);
    }, false);
};
function borderObject(id){ 
    document.getElementById(id).style.border = "4px solid red"; 
}

<div class='objeto' id='obj1'>obj1</div>
<div class='objeto' id='obj2'>obj2</div>
<div class='objeto' id='obj3'>obj3</div>

score 0 · Answer 2 · answered Apr 22 '17 at 14:38

<div class='objeto'>obj1</div>
<div class='objeto'>obj2</div>
<div class='objeto'>obj3</div>
<script type='text/javascript'>
    var i;
    var objetos = document.getElementsByClassName('objeto');
    for (i = 0; i<objetos.length; i++){
         objetos[i].addEventListener('mouseover',function(){
                  borderObject(objetos[i]);
         }, false);
    };
    function borderObject(objetos){ objetos.style.border="4px solid red"; }
</script>

score 0 · Answer 3 · answered Apr 22 '17 at 14:38

Define the hover behavior outside of the for loop -

let addListener = function(id) {document.getElementById(id).addEventListener('mouseover', function(){
                        borderObject(id);
                    }, false);
                }

var objetos = document.getElementsByClassName('objeto');
for (var i = 1; i < objetos.length + 1; i++){
     var id = 'obj'+i; 
     addListener(id)
};

Indepent mouseover addEventListener in a Loop

3 Answers3