onClick 在 jsFiddle 中不起作用

Question

我无法理解为什么 onClick 事件在 jsFiddle 中不起作用。该代码在浏览器上运行良好，但是当尝试将其移植到 jsFiddle 时，我失去了触发 onClick 事件的能力。

我当前的代码如下：

对于HTML：

<body>

<button id="find-near-btn" onClick="getMylocation()">
  Find companies near me
</button>  

<button id="mark-pos-btn" onClick="markMyPosition()">
  Mark my position
</button>  

<div id="mymap"></div>
<div id="output"></div>

</body>

js:

function initmap(initialLat, initialLong){
  output.innerHTML += "<p>Initialized</p>";

  if(!initialLat || !initialLat.length){
        initialLat = 38.01693;
  }

  if(!initialLong || !initialLong.length){
    initialLong = -8.69475;
  }

  var mymap = this.mymap = L.map('mymap',{
    center: [initialLat, initialLong],
    zoom: 15
  });

  var osmUrl='http://tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

  L.tileLayer(osmUrl, osmAttrib).addTo( mymap );
}

function getMylocation(){

  output.innerHTML += "<p>Obtaining location.</p>";

  if(navigator.geolocation){

      navigator.geolocation.getCurrentPosition(function (position) {

        var lat = position.coords.latitude;
        var long = position.coords.longitude;

        mymap.setView(new L.LatLng(lat, long), 15);

    }, function (error) {
      // Get information based on IP
      getLatLongByIP();
    });
}
}

function getLatLongByIP()
{
  $.get("http://ip-api.com/json", function(response) {

    handleData(response.lat, response.lon);  
  }, "jsonp");
}

function handleData(lat, long){
  mymap.setView(new L.LatLng(lat, long), 15);
}

function markMyPosition()
{
    if(navigator.geolocation){

    navigator.geolocation.getCurrentPosition(function (position) {

        var lat = position.coords.latitude;
        var long = position.coords.longitude;

        L.marker([lat, long]).addTo(mymap);

    }, function (error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          output.innerHTML += "<p>User denied the request for Geolocation.</p>";
          break;
        case error.POSITION_UNAVAILABLE:
          output.innerHTML += "<p>Location information is unavailable.</p>";
          break;
        case error.TIMEOUT:
          output.innerHTML += "<p>The request to get user location timed out.</p>";
          break;
        case error.UNKNOWN_ERROR:
          output.innerHTML += "<p>An unknown error occurred.</p>";
          break;
      }
    });
}
}

initialLat = 38.01693;
initialLong = -8.69475;

initmap(initialLat, initialLong);

fiddle 可以是 found here。当我点击任何按钮时，我什么也得不到。关于如何使这项工作有任何想法吗？

Answer 1

您需要将 JS 代码更改为位于页面的 <body> 标记内。使用 Javascipt 面板右上角的小齿轮并选择 Load type 下的 No wrap - in <body>。 I already tested this and it works.

onClick 在 jsFiddle 中不起作用

onClick not working inside jsFiddle

html

javascript

jquery

jsfiddle