How to Add an Event Listener in JavaScript for a Bubble.io Element?

Questions
1

I’m working with Bubble.io and JavaScript, and I need to add an event listener to a specific element on my Bubble.io page. Could you please guide me on how to set up an event listener in JavaScript so that I can trigger a function or action when a user interacts with that particular element?

2

First retrieve the element by its ID:

const myElement = document.getElementById('myElementId');

Define a function to run when the event occurs (or, this may be a JavaScript to Bubble element, so that you can run Bubble workflows)

Then add the listener for the desired event:

myElement.addEventListener('click', myFunction);

1 Like
3

I tried it in html element but not work in all actions like touch events for mobile @adamhholmes

4

Works fine for me…

what event are you using? (and what device is it on)?

5

it works fine right now also :slightly_smiling_face:
thanks so much @adamhholmes

1 Like
6

Could you break it down a bit further how you got this to work.
Are you using toolbox?

7

Hi @adamhholmes and @amer
I just can’t get this to work.
Could anyone of you post the full solution?
I’m trying to add an event listener that leads to page navigation.
I’m just stuck right now.

8

What exactly are you trying to do?

9

I have a button with the class name .button-leave-meeting (it’s the leave button in a jitsi video meeting) when it’s clicked the video just closes, but I want the user to also be taken back to the previous page.

This

const leaveMeetingButton = document.querySelector('.button-leave-meeting');
        if (leaveMeetingButton) {
          leaveMeetingButton.addEventListener('click', () => {
            window.history.back();
          });

Truth is, I’ve searched the forum and youtube, and nowhere can I find the solution to how an event listener is implemented except this one.

10

well your code is missing a closing } but aside from that it should work just fine

11

:+1:
The thing is, where do I put that code?
I have searched this forum and YT, but just can’t figure it out.

12

Your code seem that you do query for element by class name try to use id instead.

13

Ok, thanks for that, I’ll keep in mind.
I’m feeling a bit dumb here, but what I’m really trying to figure out is this,
Where do I put this js code snippet?
Is it in the workflows “run javascript” or the javascript to bubble element?
I’m a real novice when it comes to this and there isn’t much info on this.