# Changing scene on click

**URL:** <https://phaser.discourse.group/t/changing-scene-on-click/5440>\
**Category:** Phaser 3\
**Created:** [March 8, 2020, 10:22am UTC](https://phaser.discourse.group/t/changing-scene-on-click/5440 "2020-03-08T10:22:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![philip9](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@philip9](https://phaser.discourse.group/u/philip9)\
**Post date:** [March 8, 2020, 10:22am UTC](https://phaser.discourse.group/t/changing-scene-on-click/5440/1 "2020-03-08T10:22:25Z")

</div>

Hello, I am trying to implement a couple of scenes in my game in order to understand them, what I am trying to do is navigate from my first scene MainMenu to a second EntryLevel when the user clicks on a play button, I have tried this which does not work:

class MainMenu extends Phaser.Scene {

```
constructor() {

    super('bootGame')

}

preload() {

    this.load.image('menuBackground', 'assets/world/menubackground.png');

    this.load.image('play_button', 'assets/world/play_button.png');

    this.load.audio('menu_music', 'assets/music/menu_music.mp3');

}

create() {

    this.add.image(400, 300, 'menuBackground');

    var playButton = this.add.image(this.game.renderer.width / 2, this.game.renderer.height / 3, 'play_button').setDepth(1);

    playButton.setInteractive();

    playButton.on('poninterdown', function () {

        this.scene.start('entryLevel')

    }, this);

    this.sound.play('menu_music', {

        loop: true

    });

}

```

}

And I also tried this that at least hooks on the click event but when I click the button I get this error: this.scene.start is not a function, here is the code:

class MainMenu extends Phaser.Scene {

```
constructor() {

    super('bootGame')

}

preload() {

    this.load.image('menuBackground', 'assets/world/menubackground.png');

    this.load.image('play_button', 'assets/world/play_button.png');

    this.load.audio('menu_music', 'assets/music/menu_music.mp3');

}

onObjectClicked() {

    this.scene.start('entryLevel')

}

create() {

    this.add.image(400, 300, 'menuBackground');

    var playButton = this.add.image(this.game.renderer.width / 2, this.game.renderer.height / 3, 'play_button').setDepth(1);

    playButton.setInteractive();

    this.input.on('gameobjectdown', this.onObjectClicked);

    this.sound.play('menu_music', {

        loop: true

    });

}

```

}

How can I change the scene when I click the play button correctly?

---

<div class="post-metadata">

**Author:** ![philip9](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@philip9](https://phaser.discourse.group/u/philip9)\
**Post date:** [March 8, 2020, 11:25am UTC](https://phaser.discourse.group/t/changing-scene-on-click/5440/2 "2020-03-08T11:25:17Z")

</div>

Turns out it was a scoping issue, fixed it like this:  
const self = this;

```
    this.input.on('gameobjectdown', function () {

        self.scene.start('entryLevel');

    });
```

---

<div class="post-metadata">

**Author:** ![glantucan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/glantucan/32/920_2.png) [@glantucan](https://phaser.discourse.group/u/glantucan)\
**Post date:** [March 8, 2020, 11:39am UTC](https://phaser.discourse.group/t/changing-scene-on-click/5440/3 "2020-03-08T11:39:26Z")

</div>

Glad you solved it.

Just as a small improvement, you can avoid the use of `self` (which is sort of an antipattern) you could register the event listener like this:

```javascript
 this.input.on('gameobjectdown', this.onObjectClicked, this);

```

The last parameter of the `on` function is the scope or context where you want the listener to be executed on.

And for the sake of completeness, I think the problem with your first try is that `'poninterdown'` is misspelled.

---

<div class="post-metadata">

**Author:** ![SirFarq](https://avatars.discourse-cdn.com/v4/letter/s/4af34b/32.png) [@SirFarq](https://phaser.discourse.group/u/SirFarq)\
**Post date:** [March 9, 2020, 12:54am UTC](https://phaser.discourse.group/t/changing-scene-on-click/5440/4 "2020-03-09T00:54:53Z")

</div>

EDIT: Never mind I saw that @glantucan already spotted it, sorry.

Not sure if you’re still uding the initial example you provided but I notice you spelled pointerdown incorrectly as ‘po **n** interdown’