Assigning event functions with a loop in JS

Question

Here is the script I have: And I'm trying to assign event to each element in an array.

window.onload = sliding;

function sliding() {
    document.getElementById('tag1').onmouseover = slideout; 
    document.getElementById('tag1').onmouseout = slidein;
}

And I tried do using the code below but that didn't work. It would trigger all the function buy it self.

window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out

function sliding() {
    for (var i = 0; i < tags.length; ++i) {
        document.getElementById('tag1').onmouseover =  setslideout(tags[i],pics[i]);
        document.getElementById('tag1').onmouseout=  setslidein(tags[i],pics[i]);
    }
}

Here is full code

window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out

function sliding() {
  /*for (var i = 0; i < tags.length; ++i) {
       setslideout(tags[i],pics[i]);
  }/*/
    document.getElementById('tag1').onmouseover = slideout; 
    document.getElementById('tag1').onmouseout = slidein;
}/*
function setslideout(tagsid,picsid){
    document.getElementById(tagsid).onmouseover = slideout(tagsid,picsid);
}*/

function slideout(){
    //alert('over '+ lid);
    if(currpos('popout1') < 200){
        document.getElementById('popout1').style.left = currpos('popout1') + 10 + "px";
        var timer = setTimeout(slideout,10)
    }else{
        clearTimeout(timer);
    }
}
function slidein(){
    //alert('over '+ lid);
    if(currpos('popout1') > 0){
        document.getElementById('popout1').style.left = currpos('popout1') - 20 + "px";
        var timer2 = setTimeout(slidein,10)
    }else{
        clearTimeout(timer2);
    }
}
function currpos(element){
    return document.getElementById(element).offsetLeft; 
}

Here what im trying to to http://signsourceak.com/index2.html (first link in the drop down works )

possible duplicate of Event handlers inside a Javascript loop - need a closure? — Russ Cam
– Russ Cam, Commented Feb 9, 2011 at 22:29
what do the functions setslideout and setslidein contain? explicit code please. — invisible bob
– invisible bob, Commented Feb 9, 2011 at 22:31
I think Russ Cam's right. It would help if you included the setslideout function too. — jacobangel
– jacobangel, Commented Feb 9, 2011 at 22:32
Your code is definitely wrong. document.getElementById('tag1').onmouseover will be setslideout(tags[7], pics[7]); and others setslideout will be discarded. — kirilloid
– kirilloid, Commented Feb 9, 2011 at 22:38

Collective Cognition · Accepted Answer · 2011-02-09 22:44:48Z

1

Here's a version of your code modified to use closures, hopefully this does the trick:

window.onload = sliding;
var tags = new Array('tag1','tag2','tag3','tag4','tag5','tag6','tag7','tag8');// List of headings
var pics = new Array('popout1','popout2','popout3','popout4','popout5','popout6','popout7','popout8');// list of images that slide out

function sliding() {
    for (var i = 0; i < tags.length; ++i) {
        document.getElementById(tags[i]).onmouseover = (function(j){ 
            return function(){
                setslideout(tags[j], pics[j]);
            }       
        })(i);
        document.getElementById(tags[i]).onmouseout = (function(j){ 
            return function(){
                setslidein(tags[j], pics[j]);
            }   
        })(i);
    }

}

answered Feb 9, 2011 at 22:44

Collective Cognition

6971 gold badge4 silver badges8 bronze badges

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

2 Comments

user113716 Over a year ago

That's not quite right. Take another look at the code in the question.

Hello71 Over a year ago

Why are you using a function factory instead of a plain function?

Collectives™ on Stack Overflow

Assigning event functions with a loop in JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related