Can Phaser interact with DOM elements outside canvas?

[przemoo83]

Hi
Is it possible to make pahaser react to a button which is created outside canvas? I want to change game state by clicking a button which is somewhere outside canvas.

I tried this code but whenever button is clicked it returns "undefined". Any help much appreciated

var Cutters = {};Cutters.Boot = function(game) {};Cutters.Boot.prototype = {preload: function() {	this.load.image('logo','img/logo_allcomp_white.png');	this.load.image('welcome','img/welcome.png');	this.load.image('gradient','img/gradient.png');},create: function() {	this.add.sprite(0,0,'gradient');	this.stage.backgroundColor = '#ffffff';	this.add.sprite(20,20,'logo');	var slider = this.add.tileSprite(0, 0, this.game.width, this.game.height,'welcome');	slider.autoScroll(-20,0);	var button = document.getElementById('startbtn');	button.addEventListener('click', function(){game.state.start('Level_!');});},update: function() {	}};

[ptdnet]

I was doing stuff like this and yeah it should work, because in the end it's all just JavaScript.

 

In your listener, the button *should* end up being sent to you as event.listener.

[Abderrahmane TJ]

there is a `this` missing in : button.addEventListener('click', function(){game.state.start('Level_!');});

[przemoo83]

there is a `this` missing in : button.addEventListener('click', function(){game.state.start('Level_!');});

Even if I change it it still returns undefined.

The event is captured properly but I cannot figure what is the proper reference to change the game state

[Abderrahmane TJ]

did you try doing :
 

var that = this;button.addEventListener('click', function(){that.game.state.start('Level_!');});

the `this` inside the anonymous function will be scoped differently once the click is handled.

[przemoo83]

did you try doing :

 

var that = this;button.addEventListener('click', function(){that.game.state.start('Level_!');});

the `this` inside the anonymous function will be scoped differently once the click is handled.

Man you ARE genius! That works. Big thanks to you!

[mwatt]

@przemoo83

 

When events are called, JavaScript will change the meaning of "this" in functions that are set up as an event handler.  However, if beforehand, you set the correct "this" value to another variable, for example "that", JavaScript remembers what "that" means because JavaScript remembers the scope created by any enclosing function of an inner function (this is called a closure).

 

The next version of JavaScript will provide a convenient way to work around such issues, but until then, using "that" or "self" or some such is a standard workaround.

[przemoo83]

@przemoo83

 

When events are called, JavaScript will change the meaning of "this" in functions that are set up as an event handler.  However, if beforehand, you set the correct "this" value to another variable, for example "that", JavaScript remembers what "that" means because JavaScript remembers the scope created by any enclosing function of an inner function (this is called a closure).

 

The next version of JavaScript will provide a convenient way to work around such issues, but until then, using "that" or "self" or some such is a standard workaround.

Thanks for the tip. Still a lot for me to learn