1
 var g = document.getElementById('my_div');
for (var i = 0, len = g.children.length; i < len; i++)
{

    (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

}

So I saw the above example that shows how to get the index of the clicked element. I noticed that it uses "index" as a parameter. Unfortunately I am only aware of indexof so how does this work? I cant find anything about "index" when googling: javascript index property or javascript index argument.

Edit: I really didnt see the function call with (i) as it was so small.

Asperger
  • 3,064
  • 8
  • 52
  • 100

2 Answers2

2

The other answer and comments are correct, index in this case is just a function argument, but I'll (try) to explain a bit more what's going on here.

As others have said, index is just a variable, in this case the argument to the function. There's nothing special about the name index here, it could have been argument1 or vader :-), or whatever.

So what's happening is that this function is being declared:

function(arg1){
        g.children[i].onclick = function(){
              alert(arg1)  ;
        }    
    }

I've replaced index with arg1 to show that index isn't special, although it works fine with index. After that function's declared, it's being called by wrapping it in parens, and then passing the argument i (the (i)). This calls the function, assigning the current value of i to the first argument to the function, arg1 here, or index in the original. The function declares another function, this time

function() {alert(arg1);}

and assigns it to the onclick handler of the i'th element of the g.children array. So each onclick handler will be a function that just does an alert of the index of the array element.

If you step through the loop in a debugger, you'll see it effectively does:

g.children[0].onclick = function(){ alert(0); };
g.children[1].onclick = function(){ alert(1); };
g.children[2].onclick = function(){ alert(2); };

etc.

blm
  • 2,379
  • 2
  • 20
  • 24
  • 1
    Im so embarrassed. I am so extremely tired (1 am) that I overlooked this extremely simple function call. Should my question be deleted or should I keep it in case someone else has trouble? – Asperger Dec 25 '15 at 23:05
  • 1
    @Asperger I'd leave it. Even though you get it (and don't be embarrassed, everyone that's been programming for more than a few minutes has situations where they just don't get something until someone points out the obvious :-) ), someone else may not, and there's a bit going on here that's somewhat unique to JavaScript. – blm Dec 25 '15 at 23:08
  • Whew! Worst things happened before! I guess I need to buy a rubber duck and talk to it – Asperger Dec 25 '15 at 23:13
1

the code:

 (function(index){
        g.children[i].onclick = function(){
              alert(index)  ;
        }    
    })(i);

is an auto-executed function, which is called with value's argument i.

Simple example:

function a(arg1) {
    console.log(arg1);
}
a(10); //console.log(10);

You can do this with that way:

(function (arg1) {
  console.log(arg1);
})(10); //console.log(10);
Marek Woźniak
  • 1,766
  • 16
  • 34