After I grab an array of input element tags, I try to loop through them adding the onkeypress event listener to each one of them.

My Code:

window.onload = function()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    console.log(inputTags);
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.lenght; i++)
    {
        var tag = inputTags[i];
        var functionToAdd = function(event, tag)
        {
            isNumberOrDot(event, tag);
        };
        tag.addEventListener('keypress', functionToAdd, false);
    }
};

Question:

Why isn't tag.addEventListener('keypress', functionToAdd, false); not adding the onkeypress event listener?

After I grab an array of input element tags, I try to loop through them adding the onkeypress event listener to each one of them.

My Code:

window.onload = function()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    console.log(inputTags);
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.lenght; i++)
    {
        var tag = inputTags[i];
        var functionToAdd = function(event, tag)
        {
            isNumberOrDot(event, tag);
        };
        tag.addEventListener('keypress', functionToAdd, false);
    }
};

Question:

Why isn't tag.addEventListener('keypress', functionToAdd, false); not adding the onkeypress event listener?

• javascript
• dom

Share Improve this question Follow asked Jan 30, 2014 at 21:06 sargassargas 6,18088 gold badges5454 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You have run into 3 issues in your code. First of all don't create functions inside loops, second is closure issue ( you will always get only last i value ) , third is that you have typo in length property, corrected code should be

window.onload = function()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    console.log(inputTags);
    //      Loop through them, adding the onkeypress event listener to each one
    var functionToAdd = function(event, tag)
    {
        isNumberOrDot(event, tag);
    };
    for (var i = 0; i < inputTags.length; i++)
    {
        (function( i ) {
            inputTags[ i ].addEventListener('keypress', function( e ) {
                functionToAdd( e, inputTags[i] )    
            }, false);
        })( i );
    }
};

.length is spelled wrong above:

for (var i = 0; i < inputTags.length; i++) {}