JS Variables inside HTML Element

Need help
1

I am unable to access variables declared inside the HTML Element. I was trying to update the value of the variable using the Run Javascript plugin but it’s throwing a error of undefined… Any work around?

2

Without knowing specifics, my first guess is that it’s a scoping issue - I’m not sure how Bubble.is handles Element level JS, but if your code gets wrapped in function (which is a common pattern), or if you declared it inside a function, it won’t be available outside of it.

Can it be declared at the page level instead?

If that’s not the issue, can you share your code with us?

3

I am adding leaflet map to the page by using a HTML Element.

HTML Element Code:

<div id="mapid" style="height: 100vh"></div>
    <script>
    var map = L.map('mapid',{zoomControl: false, minZoom: 3}).setView([0, 0], 12);
    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution:'<a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'dark-v9',
            accessToken: 'mytoken'
        }).addTo(map);
    </script>

I want the ability to add/remove a marker using a bubble button element, there for I created a workflow on the button which triggers a “Run Javascript” plugin

Run Javascript Code:
var mymarker = L.marker(latlng).addTo(map);

Everything works fine, but then when I trigger a workflow to go remove that marker, it gives me ERROR of “mymarker” not being defined

Run Javascript Code:
mymarker.remove();

4

I got it to work by marking the variable global by removing the “var”, hoping it does not conflict with anything else so I am using the variables names as the users unique ID

5

Glad you got it figured out!

6

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