Question 207163 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Uncaught ReferenceError:

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.

Tags:

3

Answers


  1. 0

    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");
    }
    Login or Signup to reply.
  2. 0

    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);
    
    
    }
    Login or Signup to reply.
  3. 0

    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");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search