Can add function to HTMLButtonElement in Firefox but not in Chrome?

Off topic
1

Functioning Playground: https://www.babylonjs-playground.com/#944SLJ#32

Hi everyone,
I have an html button to close an html video by changing its display style to none via typescript:


    <button id="videoCloseBtn" ><img id="quitIcon" src="textures/ui/Quit.png"></button>
    <video id="poiVideoPlayer" width="100%" height="100%" controls>Your browser does not support the video tag.</video> 



const poiVideoPlayer = document.getElementById("poiVideoPlayer") as HTMLVideoElement;
const videoCloseBtn = document.getElementById("videoCloseBtn") as HTMLButtonElement;
    videoCloseBtn.addEventListener("click", function HideVideo() 
    { 
        bgm.play();
        poiVideoPlayer.pause();
        poiVideoPlayer.currentTime = 0;
        poiVideoPlayer.style.display = 'none';
        videoCloseBtn.style.display = 'none';
    });

Inspecting the page in Firefox’s inspector shows the function is corrrectly added, and executed when I press the button, but doing the same in Chrome shows the opposite.

Capture d'écran 2024-09-18 154238
Capture d'écran 2024-09-18 154238762×332 18.2 KB

Capture d'écran 2024-09-18 154322

Meanwhile, the Playground shows the same logic, but works in both browsers. I have no idea what would be causing this. I cannot simply put the function in a script tag inside the html either, as there is some Babylon logic that I need to call at the same time, and then the problem would still persist. Any suggestion would be great.

2

The playground has no magic involved - pure js execution of your code. a slight caveat here is that every time you run your playground a new element is added, but the old one is not cleaned up. Should nto influence first execution though, so I doubt it is related to your issue.

There is no reason why your html button won’t work in chrome, other than an exception thrown before the addEventListener button. Without actually seeing this running it is very hard to say.

Oh, and - probably should be in off-topic because it is not so much babylon related :slight_smile:

1 Like
3

Thank you for your answer. I didn’t really know where to post this - figured this wouldn’t be something Babylon-specific. There is no exception thrown in the console, the code continues as if nothing happened.

I’ve tried recreating the button, removing and recreating all its inner tags, and switching between adding the method as an event listener and directly assigning the method to the element.click property.

4

Solving my own thread: The z-index of Html elements in Chrome isn’t sorted the same way as in Firefox, apparently. So when I set the button’s position as absolute to place it in front of the video element, it still considered the video to be ‘above’ the button in terms of picking up events. So I set its z-index to a very high value to allow it to catch the click events. Works both in Chrome and Firefox now.

1 Like