HTML无法识别js函数-OpenLayers

问题描述

我是OpenLayers的新手，我试图了解为什么我的html似乎忽略了我创建的任何javascript函数。当我在javascript文档中创建函数时，它确实适用于地图，但是当我使用HTML为该函数创建按钮时，它不起作用。我处于生产模式，因此openlayers api与node.js一起运行。这是我的html：

.btn {
    font-size: 5vw;
}

这是我的javascript：

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8">
    <title>Mapa prueba01</title>
    <style>
    #map {
        width: 1000px;
        height: 800px;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>
    <p id="demo">párrafo</p>
    <script src="./index.js"></script>
    <input type="button" id="boton" value="boton capa" onclick="funcionCapa()"/>
    
  </body>
</html>

谢谢大家

解决方法

<script>标签是在body标签结束之前使用的，原因是所有HTML元素都在<script>标签之后被加载，并在html元素上执行js实现。

将下面的行放在结束<body>标签上方。

<script src="./index.js"></script>

以便可以执行funcionCapa()。

修复该问题的唯一方法似乎是在javascript文档中创建函数，然后在CSS中为其赋予样式，如本示例所述：https://openlayers.org/en/latest/examples/custom-controls.html

谢谢你们

当您尝试使用DOM元素上的事件属性（在您的情况下为onclick）调用函数时，该函数应该是全局的。您可能在应用程序中使用了诸如包裹或webpack之类的捆绑器，它可以转换代码并创建JavaScript模块。除非您使用window对象显式声明它们，否则您声明的所有函数和变量都将成为局部变量。

window.funcionCapa = function() { 
   capa1.setVisible(false); 
}

然后以这种方式称呼他们

<input type="button" id="boton" value="boton capa" onclick="window.funcionCapa()"/>

在您的情况下，您可能会收到错误“ funcionCapa未定义”，因为funcionCapa是本地函数，您无法从事件属性onclick进行访问。

您最好完全避免在DOM元素上使用事件属性，而应使用JavaScript绑定事件。

function function function html javascript openlayers openlayers