JS event listener

[sherman]

Hopefully an easy question for someone . I need help implementing a JS event listener in Bubble. I can do this on jsfiddle (https://jsfiddle.net/vn9oabht/3/), but can’t make it work in Bubble.

Currently in my Bubble editor, I have a HTML element containing the following:

< div id=“testtext”>click me pls< /div>

In my Bubble workflow, when the “Page is loaded”, the following JS is executed via the JS workflow action (provided in the Toolbox plugin):

document.getElementById(“testtext”).addEventListener(“click”, function(){ document.getElementById(“testtext”).innerHTML = “YOU CLICKED ME!”
}
);

Unfortunately, this event listener works perfectly in JS fiddle, but not in Bubble. Thanks for any insight in advance, Sherman

[yusaney1]

Hello,
Make sure you enabled the checkbox In Settings > General:
“Expose the option to add an ID attribute to HTML elements”

Put the same elementID on the html element “testtext”:
https://puu.sh/Aqhrz/e13e90d04d.png

Put the event on load page as you said (im using Components plugin for run the js):
https://puu.sh/Aqhsv/b608f6825e.png

And you should be good:

Editor:

Bubble Editor - lolcomp

Have fun,
Regards.

[sherman]

Thanks @yusaney1 Is it possible to specify a different JS action for different div id clicks inside the same HTML element? That was my actual problem - my apologies, I oversimplified by only showing 1 div in the original question. For example, say my HTML element contains:

< div class=“parentContainer”>< /div>
< div id=“testtext1”>click me pls< /div>
< div id=“testtext2”>another click div< /div>
< div id=“testtext3”>a third click div< /div>

I want a unique JS event listener for testtext1, a different one for testtext2, and a different one for testtext3. Exposing the ID Attribute for the HTML element doesn’t create the specificity for unique actions on the multiple divs inside the HTML element? And I’ve been unsuccessful in retrieving the individual div elements using the JS in the original question…

[yusaney1]

But what are you trying to do?

I understand that part of having different div ids inside the same HTML element, but what should happen when you click? It fires fist testtext1 -> next click -> testtext2 -> next -< test3?

What should the flow of that interaction?

Explain me a bit, and i will try help you.

PS: Why you don’t create 3 different html containers and then assign each one their div?

I.E: https://bubble.io/page?type=page&name=jstester_2&id=lolcomp&tab=tabs-1

Regards.

[sherman]

Thanks for being so open to helping out @yusaney1. The end goal for user interface is shown below, where “user attributes” are listed inside bubbles that adjust to content length, which also align to the left and closely to each other (this is in contrast to using a repeating group with equal widths). I’ve done this by placing individual divs inside a div of the class “parentContainer”.

The parentContainer css is below:

 .parentContainer {

display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}

But now the issue is I’m unable to expose the individual div IDs inside the single HTML element. The end goal for workflow is to allow users to click on individual bubbles (i.e. “user attributes”), which triggers the text inside their “profile” to change to the text inside the bubbles. I.e. this provides a quick way for users to add a “user attribute” to their profile with a single click.

Maybe there’s a way to create 3 different HTML containers (as you suggested, solving the workflow issue), and assign these into a single parentContainer (so the user interface is as per above print screens)?

Sherman

[yusaney1]

And if we try to do that without using html container + js?

Using only Bubble? Have you tried?
When user press on that “attributes” what should happens? The text changes to? It saves any value when you press on the attribute?

Best.

[sherman]

So without using a html container and JS, I’ve successfully set up a workflow using a repeating group in Bubble (print screen below), where clicking on a repeating group cell sends the text from that cell (e.g. “Perseverence hahaha”) to the user’s profile. The end result being that the user has just added the attribute “Perseverence hahaha” to their profile

And you are correct in your last sentence. Pressing on the repeating group cell sends the text in that cell to the user’s profile . So the only problem with this repeating group solution is that the repeating group cells are of same width and don’t adjust to texts of different lengths. Hence, the HTML container and JS approach. Sherman

[yusaney1]

Can you post your editor url?

If possible can you post 2 images:

• How you want looks like your repeating group
• How looks like actually

Best.

[sherman]

Here is the editor https://bubble.io/page?name=index&id=sandboxsherman&tab=tabs-1

The development preview http://sandboxsherman.bubbleapps.io/version-test/index?debug_mode=true

The workflow for the repeating group is good. If I could get either of the following, that would be great:
(1) repeating group UI to expand cells based on length of text (i.e. unequal cell widths); or
(2) html+JS to allow individual divs to be clicked, and text of div added to user attribute of user.

Thanks again, Sherman

[yusaney1]

Did some changes trying to make it look bit as the html containers.

I removed the shape because was not required to create the radial form.

You can keep editing the elements as you wish.

Looks bit better?

PS: I’m going to sleep, i will check tomorrow your answer.

Best.

[sherman]

Great! Looks nice. I edited the data, so there is short and long text to adjust the repeating group cells for. I will keep you posted if I have a breakthrough