How to generate event handlers with loop in Javascript?

Question

For example, I have 10 a tags generated from an AJAX response:

<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>

I need to assign onclick event to each of them via loop:

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }
}

This doesn't work, it only assigns onclick to the last a tag and alerts "11". How can I get this to work? I'd prefer not to use jQuery.

You should call `attachEvent` / `addEventListener` (although they won't solve your problem) — SLaks, Jun 26 '11 at 23:23
@SLaks Why are `attachEvent`/`addEventListener` more appropriate than `element.onclick`? — Micah Henning, Oct 19 '12 at 19:11

score 41 · Accepted Answer · answered Jun 26 '11 at 23:22

41

All of your handlers are sharing the same i variable.

You need to put each handler into a separate function that takes i as a parameter so that each one gets its own variable:

function handleElement(i) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    };
}

for(i=1; i<11; i++) 
    handleElement(i);

answered Jun 26 '11 at 23:22

SLaks

868,454
176
1,908
1,964

test.html:11 Uncaught TypeError: Cannot set property 'onclick' of null – sabin maharjan Sep 06 '16 at 06:08

score 20 · Answer 2 · answered Jun 26 '11 at 23:24

20

A closure is what you're looking for:

for(i=1; i<11; i++) {
    (function(i) {
        document.getElementById("b"+i).onclick=function() {
            alert(i);
        };
    })(i);
}

answered Jun 26 '11 at 23:24

Kevin

3,771
2
31
40

2

I'd say that Caballero has a closure where they don't want one and that they want a closure buster to force the immediate evaluation of `i`. That's what your self-executing function is doing. – mu is too short Jun 27 '11 at 00:01
1

Closure/No-Closure... I don't care! This anonymous/self-invoking solution is beautiful :) I'd have ticked this one. – Nick Apr 12 '12 at 05:36
Far more elegant than having a separate function. – Micah Henning Oct 19 '12 at 19:09

score 6 · Answer 3 · answered Jan 31 '14 at 05:24

There are two ways to use closure on this problem. The idea is to create a scope with a snapshot of "i" variable for each iteration to be used by event handler.

Solution #1 (as was mentioned by Kevin):

for(i=1; i<11; i++) {
    (function(num) {

       document.getElementById("b"+num).addEventListener('click', function() {
            alert(num);
       });

    })(i);
}

Solution #2:

for (i=1; i<11; i++) {
    document.getElementById("b"+i).addEventListener('click', (function(){
        var num = i;
        return function() {
            alert(num);
        }
    })());
}

How to generate event handlers with loop in Javascript?

3 Answers3

Linked

Related