Javascript pass variable to event function

Question

I'm having trouble getting the value of i to be passed on to the scMotion function

for ( i = 0; i < tmp.length; i++ ) {
document.getElementById("sc"+i).onmousedown=function() { return scMotion(i,'up') };
}

To clarify the question, this for loop is doing other stuff, adding elements to the dom.

For some reason even if i is at number 39 the value of i being passed in the function I ma attaching is the final value of i i.e 80.

@xyu: perhaps you need to refresh your knowledge about variable scopes in JS and about closures especially. — zerkms, Nov 23 '12 at 11:27
I know it's in a different scope so how get it in the right scope, that's the question. — Guesser, Nov 23 '12 at 11:27
@user1209203: there is nothing wrong with scope. Can you explain the "trouble"? — zerkms, Nov 23 '12 at 11:28
`var` At the beginning of declaring the variable makes it accessible. The different scope shouldn't matter. — George, Nov 23 '12 at 11:28
try `return scMotion(this.id.replace('sc',''),'up');`, the id is just _"sc" + [some number]_ by the looks of things, or use closures... look at my answer for more details — Elias Van Ootegem, Nov 23 '12 at 11:41

score 6 · Accepted Answer · edited May 23 '17 at 12:04

That works as you typed it because there should be a closure between i and the function:

var i="4";
document.getElementById("sc"+i).onmousedown=function() {
    return scMotion(i,'up'); // <-- due to the created closure, the i here
                             //     refers to the i above.
};

However, remember that it's a closure. So perhaps the following scenario is what's tripping you up:

var i="4";
document.getElementById("sc"+i).onmousedown=function() {
    return scMotion(i,'up'); // <-- due to the created closure, the i here
                             //     refers to the i above.
                             //     However, when the event happens in the
                             //     future the value of i in here will
                             //     be "5" due to the code below:
};
i = "5";

This is a classic closure in a loop problem. See this to understand what's happening: Please explain the use of JavaScript closures in loops

That's the one I had come across this before but couldn't remember exactly the solution. — Guesser, Nov 23 '12 at 11:40

Bruno · Answer 2 · 2012-11-23T11:50:12.447

Try instead to use addEventListener. You can use the id to pass the number to your function.

for ( i = 0; i < tmp.length; i++ ) {

    var el = document.getElementById( "sc" + i );

    if ( el.addEventListener ) {

        el.addEventListener( 'mousedown', handleMouseDown ); 

    } else if ( el.attachEvent )  { // for IE8 and previous versions

        el.attachEvent( 'mousedown', handleMouseDown );

    }
}

function handleMouseDown( event ) {

    var num = event.target.id.replace( "sc", "" );
    scMotion( num, 'up' );
}

Javascript pass variable to event function

2 Answers2