This feels like a very basic question, but I can't seem to find an answer t it. I have an array of clickable svg rects that have id's "texture-1", "texture-2" etc. The textureInput array holds the getElementById's for those rects, that call a changeTexture() function on click. I want "1" to be passed into the changeTexture() function when "texture-1" is clicked on etc.

Manually assigning these values works: e.g.

```
  textureInput[0].addEventListener('click', function(){changeTexture("0")}, false);
  textureInput[1].addEventListener('click', function(){changeTexture("1")}, false);

```

But doing the same thing in a loop does not:

```
for (var i=0; i<maxTextures; i++){
   textureInput[i].addEventListener('click', function(){changeTexture(i)}
};

```

Is it passing in the then current value of "i" at event time - which is undefined outside the loop?