Iterate var names using a count with javascript

Question

I need to write a loop that will iterate the following 2 statements 44 times.

    window.onload = function() {
        var input1 = document.getElementById("alpha1");
        var input2 = document.getElementById("alpha2");
        var input3 = document.getElementById("alpha3");
        input1.onkeypress = alphaFilterKeypress;
        input2.onkeypress = alphaFilterKeypress;
        input3.onkeypress = alphaFilterKeypress;
    };

What have you tried? [loops](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for) are quite simple constructs. — Bergi, Mar 25 '13 at 15:48

score 1 · Accepted Answer · answered Mar 25 '13 at 15:48

1

There is no problem in it:

for (var i = 1; i < 45; i++) {
    var input = document.getElementById("alpha" + i);
    input.onkeypress = alphaFilterKeypress;
}

answered Mar 25 '13 at 15:48

VisioN

143,310
32
282
281

But how do I also increment the input1, input2, input3? – King Jeremy The Wicked Mar 25 '13 at 15:50
@KingJeremyTheWicked There is no need in defining 44 different variables, inside the loop you can use one. – VisioN Mar 25 '13 at 15:51
I had gotten this far... but couldn't figure out how to loop to assign input1, input2, input3, etc. – King Jeremy The Wicked Mar 25 '13 at 15:51
1

Duh ... took out that comment. No need to have multiple variables. – Lee Meador Mar 25 '13 at 15:51

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

Instead of looping through this 44 times, why not delegate the event? attach a single listener, and check if the id matches a given pattern

document.body.addEventlistener('keypress', alphaFilterKeypress, false);

You'll have to change the function definition - adding this check:

function alphaFilterKeypress(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (!target.id.match(/alpha[0-9]+/))
    {//don't handle the event
        //event was fired on an element with another (or no) id
        return e;//don't handle it here
    }
    //an element with id alpha[number] fired the event
    //handle the event
}

As you can see from on this previous SO question the type of "key" event you're using is important. Where the keypress event does not pick up on keys like backspace, control etc... you might want to prefer using the keydown event.
Play around with it, and work out which event suites your needs the best

edited May 23 '17 at 10:25

Community

1
1

answered Mar 25 '13 at 15:50

Elias Van Ootegem

74,482
9
111
149

It will bind `keypress` event to `body` element. There is no delegation here. – VisioN Mar 25 '13 at 15:52
@VisioN: now there is, I was working on the edit - Showing how the handler needs to be altered – Elias Van Ootegem Mar 25 '13 at 15:55
Yeah, but this is not `click` event, this is `keypress`. I'm not sure this will work. – VisioN Mar 25 '13 at 15:56
1

@VisioN: It should work, but I added a related question on delegation/event listeners and various key* events. – Elias Van Ootegem Mar 25 '13 at 16:00
You have a typo in method name: `addEventListener`. – VisioN Mar 25 '13 at 16:10

Iterate var names using a count with javascript

2 Answers2