Select a query from css file

Help & Support
1

Hello!
I’ve created two buttons and i use the following two commands:
var button1 = this.div.querySelector(’.button1’);
var button2 = this.div.querySelector(’.button2’);

When i push the first button i want to change the scene and the second is about music, pause or play.
But both of buttons change the scene.

My editor is here:PlayCanvas | HTML5 Game Engine
and the result here: PlayCanvas | HTML5 Game Engine

2

when I click on the first button I have this error:
Uncaught TypeError: Cannot read property 'root' of undefined
and you can see that you are redeclaring the var self with a wrong this value;

// add event listener on `click`
        button1.addEventListener('click', function() {
                var self = this; // REMOVE THIS LINE
                self.app.root.destroy();
                self.app.loadSceneHierarchy(564021, function (err, parent) {
                });
        });
1 Like
3

The same applies for the second button.

1 Like
4

Thank you for the help!
When i click the second button, the scene 564021 is being loaded and the music is still on.
I can’t understand why this is happening.

5

The second button doesn’t change scene but plays/pauses another music.
The first button instead, load a new scene, and it seems is playing again the starting musing at a lower volume.
I didn’t investigate further. Here should be on you :slight_smile:

If you want to understand what is happening I strongly suggest you to put more effort into writing a more ordered and clear code.
For example, you create HTML and DOM events inside the initialize of an element that is also a button and that has additional code that is not used in this context.

Then set one or more breakpoints and debug.
You don’t have to step inside the source code of PlayCanvas with you debug.

For example, using Chrome Developer Tools you have these buttons:
31
Use the second icon to execute a function without stepping in. You should use it for any function that you don’t need to debug.

1 Like