CODEWITHSUNDEEP
javascripthighchartsonclick
MHS
MHS

Reputation: 931

Highcharts: Context Menu Button, onclick function

I have a page with several charts, and I add specific options to the exporting context menu for each chart.I need to call somefunction() when any item clicked. absolutely this works but not correctly!

This is the code I am using:

HelloWorld = function () {
    var items = [];
    for (var index = 0; index<5; index++) {
        items.push({text: "items "+index, onclick: function() {
            alert(index);
        }});
    }
    return items;
};

buttons: {
  contextButton: {
    menuItems: HelloWorld()
  }
}

Here is a fiddle which demonstrates my problem: Fiddle

when any items clicked, onclick function alert(5)! Thanx a lot!

Upvotes: 3

Views: 1547

Answers (1)

sheilak
sheilak

Reputation: 5873

This is a closure issue. The problem is here:

for (var index = 0; index<5; index++) {
    items.push({text: "items "+index, onclick: function() {
        alert(index);
    }});
}

In each iteration, you are setting the value of onclick to be a function which alerts index. However, the index variable within each of these functions are all bound to the one index variable declared outside the function. And the value of index that they will actually use by the time the function runs is the final value of index, which is 5.

In order to fix this, you can use an IIFE (Immediately-Invoked Function Expression) wrapper to pass each value of index into the anonymous function as a new variable i whose value won’t change as index changes.

for (var index = 0; index<5; index++) {
    items.push({text: "items "+index, onclick: (function(i) {
        return function(){
            alert(i);
        }
    })(index)});
}

In other words, the wrapper function executes immediately and returns a new function which behaves like your original function except that it is not bound to the index iterator.

Updated fiddle

Upvotes: 7

Related Questions