Clicking Any Button Calls ALL Buttons

[HawpT]

Hey,

I have an interesting problem where in one game state (Menu) I have a button that moves me to another state (PlayState). I have many buttons in the state PlayState. For some reason, ALL of the buttons in my second state are 'clicked' when I click the first button, in the first state, before the rest of the buttons even exist. Even when the callBack function I pass to the buttons are different, they are still invoked. I have tried several approaches with no success. 

Here is the code for the first state. Full code can be found at: https://github.com/HawpT/BrainFloss/blob/master/Game/js/Menu.js

//the first button in the Menu state
var newButton = this.game.add.button(400, 300, 'ball', this.clicked, this);

//the callback function for that button
clicked: function () {
        this.game.state.start('PlayState');
}

The Second State code: https://github.com/HawpT/BrainFloss/blob/master/Game/js/PlayState.js
LabelButton is just a wrapper that lets me print text on my buttons that I found on this forum.

//one of the buttons from the second game state
onebutton = new LabelButton(soccer.game,30,570,'numbutton','1',this.actionOnClicked,this,0,0,0,0);

//its call back function, blank right now
actionOnClicked: function() {}

//and its input up handler, which is invoked whenever the button from the first state is pushed
onebutton.onInputUpHandler(this.clicked(onebutton),this);
clicked: function(b) {
        switch(b) {
            case onebutton:
                answer += '1';
                break;
            case twobutton:
                answer += '2';
                break;
            case threebutton:
                answer += '3';
                break;
            case fourbutton:
                answer += '4';
                break;
            case fivebutton:
                answer += '5';
                break;
            case sixbutton:
                answer += '6';
                break;
            case sevenbutton:
                answer += '7';
                break;
            case eightbutton:
                answer += '8';
                break;
            case ninebutton:
                answer += '9';
                break;
            case zerobutton:
                answer += '0';
                break;

        }
        this.game.add.text(0,0,answer,{font: '32px Arial', fill: '#000'});

    }

Here is an image of my first state, in which the soccerball is the button.

When the soccer ball is clicked, it takes me to my second state, here:

As you can see, there is a '1' printed in the top left corner as soon as I enter this state. No buttons have been clicked. 

I am new to JS and Phaser, but I have worked a little with action script in the past and never run across anything like this. Any help would be much appreciated.

[fillmoreb]

The problem is that when this line is reached:

onebutton.onInputUpHandler(this.clicked(onebutton),this);

this.clicked(oneButton) actually runs immediatey, and you're setting the event handler to the return value of that function.  This isn't what you want.

Try instead using bind like this:

onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

Bind is a function that will return a function that will call clicked with the context of this and use onebutton as it's parameter.

Let me know if this helps.

[HawpT]

5 hours ago, fillmoreb said:

The problem is that when this line is reached:

onebutton.onInputUpHandler(this.clicked(onebutton),this);

this.clicked(oneButton) actually runs immediatey, and you're setting the event handler to the return value of that function.  This isn't what you want.

Try instead using bind like this:

onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

Bind is a function that will return a function that will call clicked with the context of this and use onebutton as it's parameter.

Let me know if this helps.

After implementing this code, the button will not trigger the clicked function at all. However, it will invoke the onActionClicked callback in its declaration.

Also, take a look at this screenshot. I added a window.alert() to the onActionClicked callback for debugging purposes. It is now being invoked every time I press any button, even though I declared a different callback  in the button on this screenshot. This is the code for the soccerball button, but it invokes the callback from buttons in the next state of the game as well as it's own (which move the game to the next state).

var newButton = this.game.add.button(400, 300, 'ball', this.clicked, this);

[fillmoreb]

Replace

onebutton.onInputUpHandler(this.clicked.bind(this, onebutton),this);

With

onebutton.onInputUp.add(this.clicked.bind(this, onebutton));

This works for me when I downloaded your project locally and made the change.

According to the documentation, onInputUpHandler() is an internal function.  Because of that, it shouldn't be used by us to assign handlers.  using the onInputUp.add() will let us add all the handlers we want to the InputUp signal.

Sorry I didn't catch that the first time around.

[fillmoreb]

Also, you should note that adding this event handler to onInputUp will not stop the handler you specified in the button's constructor from firing.

[HawpT]

Thanks Fillmore. Somehow, this actually solved ALL of the problems. I am not getting any more behavior like the button hive-mind from earlier. Strange. 

Issue solved.

[fillmoreb]

22 minutes ago, HawpT said:

Thanks Fillmore. Somehow, this actually solved ALL of the problems. I am not getting any more behavior like the button hive-mind from earlier. Strange. 

Issue solved.

Happy to help.