Uncaught ReferenceError:

Question

Hi i have this JavaScript Code. But i get the error: "Uncaught ReferenceError: saveMarker is not defined" from the console when i click the "save" button. I call the code below from my "main" HTML file with a script block. The Popup is functioning but when i klick on save the error comes up.

I use it with the leaflet library which is referenced by the "L" if someone is wondering. I also added a picture of the project.

I Tried this Version:

export function markerpopup(map, latlng) {
    console.log("starte markerpopup");
    var actual_location = "";
    var popupContent = `
      <button onclick="saveMarker()">Speichern</button>`;
    L.popup()
        .setLatLng(latlng)
        .setContent(popupContent)
        .openOn(map);
}

function saveMarker() {
    console.log("starte saveMarker");
}

And this Version (Which should be the same as https://www.w3schools.com/JSREF/event_onclick.asp):

export function markerpopup(map, latlng) {
    console.log("starte markerpopup");
    var actual_location = "";

   var popupContent = `
            <button onclick="saveMarker()">Speichern</button>

            <script> 
                function saveMarker() {
                    console.log("starte saveMarker");
                }
            </script>`;

    L.popup()
        .setLatLng(latlng)
        .setContent(popupContent)
        .openOn(map);
}

Would appreciate if someone could help!

Tried different places to place the saveMarker function.

Does this answer your question? [Use functions defined in ES6 module directly in html](https://stackoverflow.com/questions/53630310/use-functions-defined-in-es6-module-directly-in-html) — Konrad, Jul 13 '23 at 16:08
Hi Thank you for the Answer! It looks like kind of a similar Problem but i have the function in the same .js file not in a different one like in the example. Which makes it for me even more weird why it cant find the function. I tried to import save marker as an export function from a differentt file like the example but its still the same error. — Sven K, Jul 13 '23 at 16:23
You call a function from html. It doesn't matter where the element has been created. `window.saveMarker = saveMarker` — Konrad, Jul 13 '23 at 16:29
Do yourself a favor and stay as far away from W3Schools as possible. It is well-known to have outdated, incomplete, or just plain incorrect information. Use the [Mozilla Developer Network (MDN)](https://developer.mozilla.org/) as they are recognized as an authoritative resource. — Scott Marcus, Jul 13 '23 at 17:04
Thank for your Responses, i will stay away from this site! I Solved the error with the solution from 3limin4t0r. — Sven K, Jul 14 '23 at 06:10

3limin4t0r · Accepted Answer · 2023-07-13T17:37:15.793

1

Instead of passing a string to setContent() you could pass an HTMLElement.

You can create one by calling document.createElement(), then attach the event handler with addEventListener() and set the content with append(), innerHTML, or any other method to update the contents of an HTMLElement.

export function markerpopup(map, latlng) {
    console.log("starte markerpopup");

    var actual_location = "";

    const popupContent = document.createElement("button");
    popupContent.addEventListener("click", saveMarker);
    popupContent.append("Speichern");
    // or if you want a more complex structure without manually building all elements
    // popupContent.innerHTML = `<span>Speichern</span>`;

    L.popup()
        .setLatLng(latlng)
        .setContent(popupContent)
        .openOn(map);
}

function saveMarker() {
    console.log("starte saveMarker");
}

edited Jul 13 '23 at 17:37

answered Jul 13 '23 at 17:30

3limin4t0r

19,353
2
31
52

This one has done it! Thank you very much. Is this a "Javascript button/popup" which calss the HTML popup? – Sven K Jul 14 '23 at 06:15
1

I don't exactly understand what you're asking, but let me say this: Whenever you set `popupContent` to `\`\`` the browser will parse the HTML, and create the DOM structure for you. All we do here is manually create the structure, and pass it to `setContent()`. The reason the *click* event works is because `saveMarker` is available in the current context. Yet if you pass an HTML string `onclick="saveMarker()"` will be called in the global context, not in the context of the current module, causing the issue. – 3limin4t0r Jul 14 '23 at 07:38

score 0 · Answer 2 · answered Jul 13 '23 at 16:26

Since you are using export syntax, I assume that you are using an es6 module , and a <script type="module"> tag. if this is true, then your function declaration is scoped in the module, and not the whole page. You need to do something like this:


    //set the button id for yourself
    //this is just a placeholder
    document.querySelector('#popupbutton').onclick = saveMarker
    
    function saveMarker() {
        console.log("started saveMarker");
    }

a globally polluted version gives the same result – Tachibana Shin Jul 13 '23 at 18:48 — Tachibana Shin, Jul 13 '23 at 18:48

Christa · Answer 3 · 2023-07-13T17:17:06.133

what you can try to do is

function markerpopup(map, latlng) {
    console.log("starte markerpopup");

    var actual_location = "";

    var popupContent = `

            <button id="savemarkerId" >Speichern</button>
              
    `;

    const saveMarker = () => {
        console.log("started saveMarker");
    }


    L.popup()
        .setLatLng(latlng)
        .setContent(popupContent)
        .openOn(map);

    document.querySelector('#savemarkerId').onclick = saveMarker

}

or you can try

    function markerpopup(map, latlng) {
        console.log("starte markerpopup");
    
        var actual_location = "";
    
var button = document.createElement('button');

button.innerHTML = 'click me';
button.onclick = function()
{
    alert("hello, world");
}

        L.popup()
            .setLatLng(latlng)
            .setContent(button)
            .openOn(map);
    
    
    }

Uncaught ReferenceError:

3 Answers3