问题

我有这段JavaScript代码。但是当我点击“保存”按钮时，控制台会报错：“未捕获的引用错误：saveMarker未定义”。我是从我的“主”HTML文件中的脚本块调用下面的代码的。弹出窗口正常工作，但当我点击保存时会出现错误。

我在Leaflet库中使用它，如果有人想知道的话，它是通过“L”引用的。我还添加了项目的图片。

我尝试了这个版本：

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

function saveMarker() {
    console.log("开始 saveMarker");
}

和这个版本（应该与https://www.w3schools.com/JSREF/event_onclick.asp相同）：

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

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

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

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

如果有人能帮忙，将不胜感激！

<details>
<summary>英文:</summary>

Hi i have this JavaScript Code. But i get the error: **`&quot;Uncaught ReferenceError: saveMarker is not defined&quot;`** from the console when i click the &quot;save&quot; button. I call the code below from my &quot;main&quot; 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 &quot;L&quot; 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.

</details>


# 答案1
**得分**: 1

将字符串传递给[`setContent()`][1]的方式，你可以传递一个[`HTMLElement`][2]。

你可以通过调用[`document.createElement()`][3]来创建一个HTMLElement，然后使用[`addEventListener()`][4]附加事件处理程序，并使用[`append()`][5]、[`innerHTML`][6]或任何其他方法来更新`HTMLElement`的内容。

``` js
export function markerpopup(map, latlng) {
    console.log("开始 markerpopup");

    var actual_location = "";

    const popupContent = document.createElement("button");
    popupContent.addEventListener("click", saveMarker);
    popupContent.append("保存");
    // 或者，如果你想要一个更复杂的结构，而不是手动构建所有元素
    // popupContent.innerHTML = `<span>保存</span>`;

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

function saveMarker() {
    console.log("开始 saveMarker");
}

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");
}

答案2

得分: 0

由于您正在使用export语法，我假设您正在使用ES6模块，并且有一个<script type="module">标签。如果这是正确的，那么您的函数声明是在模块中作用域，而不是整个页面。您需要像这样做：

// 为自己设置按钮的ID
// 这只是一个占位符
document.querySelector('#popupbutton').onclick = saveMarker

function saveMarker() {
    console.log("开始保存标记");
}

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

答案3

得分: 0

以下是翻译好的代码部分：

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

    var actual_location = "";

    var popupContent = `
        <button id="savemarkerId">保存</button>
    `;

    const saveMarker = () => {
        console.log("开始保存标记");
    }

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

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

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

    var actual_location = "";

    var button = document.createElement('button');

    button.innerHTML = '点击我';
    button.onclick = function() {
        alert("你好，世界");
    }

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

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

}

    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);
    
    
    }