Phaser button drawn but click event not triggering

Question

So here's the set up. For some context I'm running this in Vue.js.

      preload () {
        this.load.image("button", button)
      },
      create () {
        this.game.stage.backgroundColor = "#ffa500";

        var button = this.game.add.button(this.game.world.centerX, this.game.world.centerY, 'button', test, this, 0);
        button.anchor.set(0.5)

        var test = function() {
          console.log('hi')
        }
      },
      update () {
      }

When I click on the image nothing happens. Not sure where to go on from here.

Answer 1

JavaScript has hoisting, so the declaration of test will be moved to the top, but it doesn't mean the assignment will also. So your code basically runs

var button = undefined;
var test = undefined;// hoisted
button = this.game.add.button(this.game.world.centerX, 
this.game.world.centerY, 'button', undefined, this, 0);
button.anchor.set(0.5)
test = function() {
    console.log('hi')
}

If you want test to have a value, move the assignment of test above button, or use an inner function

create() {
    function test() {}
}