Callback Parameters

[Hightower]

Trying to add buttons, that when clicked they run a function, but also pass some parameters to the function.

 

Is this possible?

 

The code is:

rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', this.light_click, this));},               light_click: function(x, y) {        // Do something with x and y    }

I thought it might have been as easy as changing the button code to:

rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', this.light_click(x, y), this));

But it's not.

[Telash]

I did something like this is a project I was working on.
 

		this.greaterButton 		= this.add.button(525, 955, 'greaterButton', function(){this.submitChoice(0)}, this);			this.greaterButton.input.enabled 		= false;			this.greaterButton.visible 			= false;					this.greaterEqualButton = this.add.button(525, 955, 'greaterEqualButton', function(){this.submitChoice(2)}, this);			this.greaterEqualButton.input.enabled 	        = false;			this.greaterEqualButton.visible 		= false;				this.lesserButton 		= this.add.button(130, 955, 'lesserButton', function(){this.submitChoice(1)}, this);			this.lesserButton.input.enabled 		= false;			this.lesserButton.visible 			= false;					this.lesserEqualButton 	= this.add.button(130, 955, 'lesserEqualButton', function(){this.submitChoice(3)}, this);			this.lesserEqualButton.input.enabled 	        = false;			this.lesserEqualButton.visible 			= false;

I did this in the create method. It works fine however this was in version 1.1.5.

[adamyall]

Assuming you have your x and y when you call the push, you just need to wrap light_click in an anonymous function.

rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', function() {this.light_click(x, y)} , this));

The way you have it right now is actually calling the function during the push, and then trying to call its return value when clicked.

[Hightower]

Think that has worked, gotta change some bits and will let you know

[Hightower]

var buttons = [];        // Loop through 25 lights and set based on array        for (var i = 0; i < 5; i++) {            var rows = [];            for (var j = 0; j < 5; j++) {                if (lights[j][i] == 1) {                    rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', function() {this.light_click(i, j)}, this));                    this.lightsOn += 1;                }                else {                    rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'offlight', function() {this.light_click(i, j)}, this));                }                x++;            }            buttons.push(rows);        }

So this counts through to make 5 rows of 5. My x & y are being sent as i & j if that makes sense, so on 1st loop it will be 0, 1 then 0,2 and so on. But it's always passing 5 and 5 for every button.

 

Sorry, very new to javascript and what not. Appreciate the help.

[rich]

It's because you're using "this" inside your anonymous function. "this" has special meaning, so it's binding the values at the time of creation, not when they're being called.

[dnassler]

Try changing:

rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', function() {this.light_click(i, j)}, this));

...to:

rows.push(game.add.button(60 * i + 48, j * 60 + 94, 'onlight', (function(x,y) {this.light_click(x, y)})(i,j), this));

and you can refer to this site (look for the part that discusses "Closures Inside Loops"):

http://bonsaiden.github.io/JavaScript-Garden/