Statically pass variable to function in JavaScript

Question

For easier explanation, please see the corresponding jsFiddle

This is the code I'm calling in a loop:

var eventNames = ["click", "dblclick", "contextmenu"];
for (var i = 0; i < eventNames.length; ++i) {
    var crtName = eventNames[i];
    $("#" + crtName).click(function () {
        alert("Event " + crtName);
    });
}

Sure, when the handler is called, crtName is always "contextmenu" because at this point, the for-loop has ended and i is always pointing to the highest possible value.

Note: In the current example, I'm using the click function from jQuery. In my real application, there's another framework being called to register an event handler. So this is just an example and it cannot be changed. Neither can I add parameters being passed to the handler when the event occurs. Therefore it's not a jQuery question.

As well, it's similar to the question "need help understanding JS code", except for the important fact that I'm not calling my event handler myself!

Basically: I would like the variable crtName to be populated when the handler is being registered, not when it's called.

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

2

Issue:

JavaScript's scopes are function-level, not block-level, and creating a closure just means that the enclosing scope gets added to the lexical environment of the enclosed function.

After the loop terminates, the function-level variable crtName has the value contextmenu, and that's what the inner function 'sees'.

So you can do,

var eventNames = ["click", "dblclick", "contextmenu"];

for (var i = 0; i < eventNames.length; ++i) {
    var crtName = eventNames[i];
    attach_event(crtName);
};

function attach_event(crtName) {
    $("#" + crtName).click(function () {
        alert("Event " + crtName);
    });
}

`Fiddle`

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 25, 2014 at 11:17

Deepak Ingole

15.9k10 gold badges49 silver badges80 bronze badges

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

1 Comment

Deepak Ingole Over a year ago

@djay please check updated ans with references given

Vier · Accepted Answer · 2014-03-25 11:16:02Z

0

As Pilot said, you need to use a closure, like this:

(function (crtName) {
    $("#" + crtName).click(function () {
        alert("Event " + crtName);
    });
})(crtName);

This way, you pass crtName to a self invoking function that gets executed with the right event name for each member of the array

answered Mar 25, 2014 at 11:16

Vier

8072 gold badges7 silver badges20 bronze badges

Comments

Deepak Ingole · Accepted Answer · 2014-03-27 18:49:00Z

-1

Since you are using crtName to refer to the element's ID, just reference this.id inside the event handler

edited Mar 27, 2014 at 18:49

Deepak Ingole

15.9k10 gold badges49 silver badges80 bronze badges

answered Mar 25, 2014 at 11:11

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

2 Comments

Atmocreations Over a year ago

thanks for your message. As written in the example, the jQuery-way is only used to simplify the example code and to create a runnable jsFiddle. Therefore, this isn't a solution. =(

Niet the Dark Absol Over a year ago

If you're using the variable to set the type of event, consider also using evt.type to get the event type.

Collectives™ on Stack Overflow

Statically pass variable to function in JavaScript

3 Answers 3

Issue:

`Fiddle`

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Issue:

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related