Accessing outer variable inside eventListener

Question

In case of:

    var allBusiness = ["one", "two", "three", "four"]
    for (var i = 0; i < allBusiness.length; i++) {
    document.getElementById(allBusiness[i]).addEventListener("click", function () {
        console.log(allBusiness);
    });
}

This one logs ["one", "two", "three", "four"]

However the following one where I try to log each value separately shows undefined:

    var allBusiness = ["one", "two", "three", "four"]
    for (var i = 0; i < allBusiness.length; i++) {
    document.getElementById(allBusiness[i]).addEventListener("click", function () {
        console.log(allBusiness[i]);
    });
}

why doesn't what log the corresponding names? and how to achieve that?

Just a suggestion but, try defining `allBusiness[i]` into a var before the console.log. no garuntees — Dendromaniac, May 28 '15 at 21:25

Daemedeor · Accepted Answer · 2015-05-28T21:35:28.707

0

The reason is simple: i is no longer defined in the scope of the callback function you are passing through.

As for how, i think a good question to ask, what are you trying to achieve? You can just use this.

var allBusiness = ["one", "two", "three", "four"]
for (var i = 0; i < allBusiness.length; i++) {
    document.getElementById(allBusiness[i]).addEventListener("click", function () {
        console.log(this.id);
    });
}

p.s. note: I do not think this is a good way to solve the problem, but it'll get what you want

edited May 28 '15 at 21:35

answered May 28 '15 at 21:25

Daemedeor

1,013
10
22

1

As much as this doesn't answer what he _wants_, it does answer what he asked: _why?_ – Dendromaniac May 28 '15 at 21:26
fair enough, i missed the how... editing :P – Daemedeor May 28 '15 at 21:29

Accessing outer variable inside eventListener

1 Answers1