2017-09-23 80 views
1

我無法弄清楚爲什麼onClick事件不在jsFiddle中工作。該代碼在瀏覽器上運行良好,但是當嘗試將其移植到jsFiddle時,我失去了觸發onClick事件的能力。onClick不工作在jsFiddle

我當前的代碼如下:

對於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); 

小提琴可以found here。當我點擊任何按鈕時,我什麼也得不到。任何想法,我怎樣才能做到這一點?

+0

在「Load type」中,選擇'no wrap - in body' –

回答

0

您需要將您的JS代碼更改爲頁面的<body>標籤內。使用Javascipt面板右上角的小齒輪,然後在Load type下選擇No wrap - in <body>I already tested this and it works