[SOLVED] Retrieve the id of an button in the build


I’m trying to retrieve the id of a button created on PlayCanvas in the build with my script, to be able to do an action on click, but I can’t, I don’t understand why.

I have take this project for testing : HTML/CSS UI | Learn PlayCanvas

And i have a simple script who just get the Id aha

var elem = document.getElementById('btn');

but it doesn’t work.

However, when I try in the console, I recover the id of my button


Same when i use document.getElementsByClassName.


What do you mean by the button at the bottom of the build?

Do you mean this:

If so, add /e after playcanv.as/ in the URL eg https://playcanv.as/e/p/kvToWplO/ and that will give you the iframeless version of the build


I mean this simple button on the left-corner.

i have set an id here :

and i wanna to get the element by id here :


But the console.log show null

That HTML is added at runtime so you maybe trying to find the HTML element before it’s been added to the DOM?

Yeah for sure is that., so maybe i can’t do what i want.

In my project I wanted using an interface to let the user choose between two scenes.

For example:
-The scene with the blue cube

-Or the scene with the red cube

So my buttons in regular html would call the buttons in the playCanvas for the scene switch and then display the PlayCanvas with the corresponding scene.

But since the html is trigger at runetime maybe that is not possible because when the user chooses between the two scenes, the playcanvas is not yet generated

Sounds like you would have 3 scenes, a ‘hub’ scene, blue cube scene and red cube scene.

The hub scene would load first with the HTML buttons to allow the user to load either the blue or red cube scene based on something like localStorage or a URL param

Yeah, but in my case i can’t have a ‘hub’ scene , i think i will take a build for each scene and try to
assembled them

What’s the reason? I’m still confused about the end result you are looking to achieve.

Even if you can’t use the hub scene to start with your project, you can still use it decide which ‘real’ scene to load with the cubes instead of having separate PlayCanvas builds

1 Like

Here’s a quick example: https://playcanvas.com/project/923452

Load different scenes with the URL param


Same PlayCanvas build, same starting ‘hub’ scene

1 Like

Sorry for the late reply, but yes that’s exactly what I was looking for to be able to get the parameter in the url to load the scene I want.

To explain for my project, basically depending on what the user chooses, I would like to load either a horizontal or vertical business card.