Value of clicked element function argument is wrong

Question

I have a loop (from 0 to 5) that add onclick event for each element that is in a <nav>.

<nav class="mq-ui-bg tools-bar" style="top:70px;left:20px;width:65px;height:385px;">
<div class="container">
    <div class="tool selected"><div class="pa" style="background-image:url('Images/Icon/Cursor.png');"></div></div>
    <div class="tool"><div class="pa" style="background-image:url('Images/Icon/Select1.png');"></div></div>
    <div class="tool"><div class="pa" style="background-image:url('Images/Icon/Bucket.png');"></div></div>
    <div class="tool"><div class="pa" style="background-image:url('Images/Icon/Rect1.png');"></div></div>
    <div class="tool"><div class="pa" style="background-image:url('Images/Icon/Circle1.png');"></div></div>
    <div class="tool"><div class="pa" style="background-image:url('Images/Icon/Erase.png');"></div></div>
    </div>
</nav>

Inside its onclick event is called a function with an argument, which contains the number of element's position in this nav that I added above.

The code of them is very short:

function FixTools(){
    var elqry=ElementClass('tools-bar').getElementsByClassName('tool');
    for(var i=0;i<elqry.length;i++){
        elqry[i].children[0].onclick=
        function(){
                SelectTool(i)
        };
    }
    function SelectTool(n){
        er=ElementClass('tools-bar').getElementsByClassName('tool');
        function fu1(i){
                Attribute( /* This changes the class attribute */
                    er[i],
                    'class',
                    'tool '+
                    ((i==n)?'selected':'un')
                    /* If i value is equal to clicked element position number
                    in my nav, then it will be selected */
                );
        }
        for(var i=0;i<er.length;i++){
                fu1(i);
                /* This loop should unselect all elements
                that are not from n position number in my nav*/
        }
        delete er;
    }
}

FixTools();

So my problem is because in my FixTools() function, into the first loop, into the onclick event and into the SelectTool(i) function first argument I only receive a integer, this: 6, the number six.

What am I doing wrong?

This is a duplicate, see https://stackoverflow.com/questions/19318554/jquery-loop-not-working-correctly — Denys Séguret, Oct 30 '15 at 16:28
It's a common problem. It doesn't matter if jQuery is involved or not. — Denys Séguret, Oct 30 '15 at 16:30

score 1 · Accepted Answer · answered Oct 30 '15 at 16:30

1

due to a mis-click, I can't close as duplicate, so here's a fix

This is a classical problem : by the time your callbacks are called, i has the value of end of loop.

for(var i=0;i<elqry.length;i++){
     (function(i){
        elqry[i].children[0].onclick=
        function(){
                SelectTool(i)
        };
     })(i);
}

The idea here is to wrap the loop body in a function creating a scope in which the value of i at function call time is saved.

answered Oct 30 '15 at 16:30

Denys Séguret

372,613
87
782
758

It worked now! By what somebodies said, the JS has a rule, the problem was because I should put it into a function? – Oct 30 '15 at 16:34
@Errorever I'm sorry but I don't understand your comment. – Denys Séguret Oct 30 '15 at 16:36

Value of clicked element function argument is wrong

1 Answers1