无法从innerhtml 中的hef 标签调用javascript 函数 - 未定义

问题描述 投票：0回答：1

我有一个可折叠 div 列表，其中填充了 geoJson 文件中的数据，并在放大和缩小地图时动态更新，以反映地图边界内的标记。

当您单击可折叠 div 时，它会打开以显示有关该功能的详细信息。

我想在显示的信息下方添加一个链接/按钮，显示“缩放到标记”，单击该链接/按钮即可将地图缩放到标记位置。

我尝试了很多方法来做到这一点，但无论我做什么，我调用的 

ZoomTo()
函数始终是 
undefined
。 
ZoomTo()
函数位于创建列表和链接的外部 javascript 文件中的函数上方。

这让我抓狂，看来事情应该这么简单。链接显示正常，但是点击时出现以下错误

未捕获的引用错误：ZoomTo 未定义
javascript:ZoomTo(extent);:1

我尝试了 StackOverflow 的各种建议，但无济于事，使其成为全局的，具有上面的功能，使用按钮并附加它们。这些函数位于 

initMap
函数内，该函数在窗口加载时被调用

当地图更改时，从事件处理程序中调用FeatureType 函数。

function ZoomTo(extent) {
  //map.getView().fit(extent,{padding: [100, 100, 100, 100],maxZoom:15, duration:500}); 
  alert(extent);
}

function FeatureType(mapfeaturetype, mapExtent) {
  htmlStr = "<div class='accordion' id="
  accordianExample ">";

  // iterate through the feature array
  for (var i = 0, ii = mapfeaturetype.length; i < ii; ++i) {
    var featuretemp = mapfeaturetype[i];

    // get the geometry for each feature point
    var geometry = featuretemp.getGeometry();
    var extent = geometry.getExtent();
    extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

    //If the feature is within the map view bounds display its details
    //in a collapsible div in the side menu
    var inExtent = (ol.extent.containsExtent(mapExtent, extent));
    if (inExtent) {

      htmlStr += "<div class='accordion-item'><div class='accordion-header' id='oneline'>"
      htmlStr += "<span class='image'><img src=" + imgType + "></span><span class='text'>"
      htmlStr += "<a class='btn' data-bs-toggle='collapse' data-bs-target='#collapse" + i + "' href='#collapse" + i + ""
      htmlStr += "aria-expanded='false' aria-controls='collapse" + i + "'>" + featuretemp.get('Name') + "</a></span>"
      htmlStr += "</div><div id='collapse" + i + "' class='accordion-collapse collapse' data-bs-parent='#" + accordionid + "'>"
      htmlStr += "<div class='accordion-body'><h3>" + featuretemp.get('Address') + "</h3><h3>" + featuretemp.get('ContactNo') + "</h3>"
      htmlStr += "<h5><a href=" + featuretemp.get('Website') + " target='_blank'> " + featuretemp.get('Website') + " </a></h5>"
      htmlStr += "<h5>" + featuretemp.get('Email') + "</h5><h5>" + featuretemp.get('Descriptio') + "</h5>"
      htmlStr += "<div id='zoom'><a href='javascript:ZoomTo(extent);'>Zoom to Marker</a></div>"
      htmlStr += "</div></div></div>";

    }; //end if 
  }; //end loop

  htmlStr += "</div>"
  document.getElementById("jsoncontent").innerHTML += htmlStr
}
javascript undefined innerhtml dynamic-list
1个回答
0
投票

使用带有事件监听器的按钮

您的问题可以简化为以下示例：

带有脚本的简单 HTML 文档（我使用了模块）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="script.js"></script>
</head>
<body>
    
</body>
</html>

该脚本定义了两个函数并调用其中一个。

function ZoomTo(extent) {
    alert(extent);
}

function FeatureType() {
    document.body.innerHTML += "<a href='javascript:ZoomTo(extent);'>Zoom to Marker</a>";
}

FeatureType()

上面的代码准确地重现了您的错误。

我们可以通过使用更复杂的 HTML 生成和事件处理方法来修复它。

这里我们创建一个按钮并在事件处理程序中调用 

ZoomTo
函数。

function FeatureType() {
    const button = document.createElement('button');
    button.textContent = 'Zoom to marker';
    document.body.append(button);
    button.addEventListener('click', ev => {
        ZoomTo('test');
    });
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.