Why is the loop assigning a reference of the last index element to?

Question

I want to add an event listener to all of my tags, each passing a reference to itself as a parameter when the even is triggered. Here is the function I wrote: ``` function validateDigitsFeature() { // Add the event listeners to input tags // Get the array of input tags var inputTags = document.getElementsByClassName('validateInput'); var tagId; // Loop through them, adding the onkeypress event listener to each one for (var i = 0; i < inputTags.length; i++) { // Give each input element an id tagId = inputTags[i].id = 'input_id_' + i; inputTags[i].addEventListener('keyup', function(){isNumberOrDot(event, tagId);}, false); } } ``` Basically the function should do the following: - Store all the input tags with the specified classname in an array - Loop through the array, adding an id to each tag and - Adding the `onkeyup` event listener with the `isNumberOrDot(event, tagId)` handler. Problem The onkeyup event is added, but they handlers of each one is always referencing the `tagId`of the…

Accepted Answer

Because the actual event occurs sometime in the future after your `for` loop has already finished running and thus its index is at the last value and any local variables in your function like `tagId` are also at their last value. You need to create some sort of closure that preserves the value of `i` or `tagId` uniquely for each event handler so they each have access to their own value.

There are several different ways to do that, but all involve passing the `i` value to a function for each event handler.

Here's one using an IIFE (immediately invoked function expression):

```
function validateDigitsFeature()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.length; i++)
    {
        //  Give each input element an id
        (function() {
            // creates a unique function context for each event handler so the
            // value of tagId is unique for each event handler
            var tagId = inputTags[i].id = 'input_id_' + i;
            inputTags[i].addEventListener('keyup', function(){isNumberOrDot(event, tagId);}, false);
        })();
    }
}
```

A little more common way to do this is to pass the index from the `for` loop into the closure and do any calculation based on it inside the event handler (though either method works fine) like this:

```
function validateDigitsFeature()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.length; i++)
    {
        //  Give each input element an id
        (function(index) {
            // passes the `for` loop index into a function closure
            // so it is uniquely preserved for each event handler
            inputTags[index].addEventListener('keyup', function(){
                isNumberOrDot(event, inputTags[index].id = 'input_id_' + index);
            }, false);
        })(i);
    }
}
```

Why is the loop assigning a reference of the last index element to?

Solution

Problem

Related problems