Defining javascript function while referencing local variable

Question

Is it possible to use the current value of a variable when defining a javascript function? In the following code I'd like to add a click function to an array of divs, each with a different value for i, ie. the first div should call setCurrentStyleIndex(0). At the moment they all call whatever the value of i is at the time of the call.

Sorry if this is dumb question.

Step3.populateStyleMenu = function() {
    var stylePopup = $("#stylePopup");
    for(var i = 0; i < Step3.fontStyles.length; i++) {
        var div = $('<div>'+Step3.fontStyles[i][0]+'</div>');
        div.css({
            'font-weight': Step3.fontStyles[i][1],
            'font-style': Step3.fontStyles[i][2],
        })
        div.data('style', Step3.fontStyles[i]);
        div.addClass('personalizePopupItem personalizeStyleItem');


        div.click(function() {
            setCurrentStyleIndex(i);
        });


        stylePopup.append(div);
     }
}

akonsu · Accepted Answer · 2013-06-04 04:33:07Z

2

try to create a closure (not tested):

(function (i) {
    div.click(function() {
        setCurrentStyleIndex(i);
    });
})(i);

answered Jun 4, 2013 at 4:33

akonsu

29.7k39 gold badges126 silver badges205 bronze badges

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

Comments

Adam Heath · Accepted Answer · 2013-06-04 04:33:17Z

1

Yup, you can do the below:

div.click((function() {
  var inx = i;
  return function() {
    setCurrentStyleIndex(inx);
  }
})());

answered Jun 4, 2013 at 4:33

Adam Heath

4,7832 gold badges37 silver badges52 bronze badges

Collectives™ on Stack Overflow

Defining javascript function while referencing local variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related