Javascript binding click handller inside a loop [duplicate]

Question

I'm trying to create several links and bind an onclick handller to them inside a loop. On clicking the link, I want to display an alert box which indicates the link number (1 for 1st link, 2 for second link, 3 for second link and so on).

<html>
<body>
</body>
</html>

<script type = 'text/javascript'>
for (var i = 0; i < 10; i++) {
    var link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.href = '#';
    link.onclick = function () {
        alert("This is the link " + i);
        return false;
    };
    document.body.appendChild(link);
}
</script>

For some reason, I get the same alert message "This is the link 10" when I can click on any link.

Could it be because the parameters to the alert function get binded only when the function is called ? Because ultimately the value of i is 10 after the end of loop.

Community · Accepted Answer · 2017-05-23 12:05:28Z

2

Simple answer, use closure:

link.onclick = (function(j) {
    return function(){
        alert ("This is the link " + j);
        return false;
    }
})(i);

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jul 7, 2013 at 22:43

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

zerkms Over a year ago

Or better - move anonymous function out of loop at all

Robert Hoffmann Over a year ago

Was gonna say same thing, but in examples like this i still have a hard time understanding why the closure is needed exactly. ..still correct response :)

gdoron Over a year ago

@Robert, all the functions reference the same "global" i variable, if it change they reference the new value. you need to reference a private scope variable. hence the closure.

Ashesh Over a year ago

what actually happens when you assign a self invoking function to a variable though ? Does it execute and then the returned function is assigned to link.onclick ?

Felix Kling Over a year ago

The event handler in the OP's code is already a closure. The key here is to execute a function to create a new scope. That function does not have to be a closure (even though all functions are closures in JS).

|

Collectives™ on Stack Overflow

Javascript binding click handller inside a loop [duplicate]

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related