HTMLElement accessing a bubble.io's input value

Need help
1

Hi there - have some javascript within a HTMLElement and wanting to access the value of one of the input fields on the page.

input field has id = start_from

was hoping to use script similar to
var s_from = document.getElementById(“start_from”).value

can’t seem to get a ‘value’ from the bubble.io input element.

Is there a way to embed the bubble.io’s input element’s value into a javascript? What’s the syntax?

2

Are you using a function to handle the changes of the input?

You want to add a listener to the input before accessing its value.

3

Thanks @GH5T. Have added a listener and page now moving in the right direction form.
Appreciate the prompt reply

4

Can you please elaborate on the listener? I would like to use a “listener” to replace as you type, specifically “,” to “.”

5

Can’t you just use a Bubble expression?

6

Yes is this possible. You need to understand jQuery a little bit. A listener is a function that “listens” for a change, or event to occur.

7

Solution that I ended up with.

My use case was to do some complex maths (power / logs) based on screen values that a user could interact with.

I wanted to access the javascript Math library as bubble’s math functions were insufficient.

Solution adopted was:

  1. javascript added to the page header. This allowed me to set up the math functions I could call from the page
  1. htmlElement added to the page. this allowed me to connect the bubble element to my calculator via a listener
document.getElementById('user_input_1').addEventListener('change', myCalculator);/script> 3. Results can be put back on the page via the calculator function document.getElementById('user_output_1').value = [calculation output];
1 Like
8

Glad you figured it out!

9

This topic was automatically closed after 70 days. New replies are no longer allowed.