Funkcje JavaScript nie działają w zewnętrznym pliku .js

Question

Użyłem zewnętrznego pliku .js dla mojego JavaScript, ale napotkałem problem z moim HTML, nie mogąc znaleźć żadnej z moich funkcji JavaScript. Wiem, że funkcje działają, ponieważ jeśli przeniesię to z zewnętrznego pliku do mojego pliku html, to działa dobrze. Błąd, który dostaję w konsoli JavaScript w Chrome, polega na tym, że moje funkcje nie są zdefiniowane. Wiem również, że moja ścieżka do mojej strony zewnętrznej działa, ponieważ mam kilka tagów canvas, które czytają JavaScript doskonale.

Podsumowując, to działa:

HTML:

<canvas id="Canvas7"></canvas> 

JavaScript:

window.onload = function() { 
    var g=document.getElementById("Canvas7"); 
    var ctx=g.getContext("2d"); 
    var grd=ctx.createRadialGradient(75,50,5,90,60,100); 
    grd.addColorStop(0,"red"); 
    grd.addColorStop(1,"white"); 
    ctx.fillStyle=grd; 
    ctx.fillRect(10,10,150,80); 

    // ... 
}; 

Ale dodaje daje mi błąd "Uncaught ReferenceError: getLocation nie jest zdefiniowana":

HTML:

<button onclick="getLocation()">Click here</button> 

JavaScript:

window.onload = function() { 
    var x=document.getElementById("location"); 
    function getLocation(){ 
     if (navigator.getlocation){ 
      navigator.getlocation.getCurrentPosition(showPosition,showError); 
     } 
     else{ 
      x.innerHTML="GeoLocation is not supported by this browser."; 
     } 
    } 
    // ... 
} 

Nie jest to ogromny problem, ponieważ mogę tylko trzymać JavaScript w moim pliku HTML, ale to zajmuje dużo miejsca i wolałbym, aby utrzymać wszystko zorganizowane. Jeśli ktokolwiek wie, jak rozwiązać ten problem, będzie to bardzo cenne.

Answer 1

Po zdefiniowaniu funkcji w ramach wywołania zwrotnego window.onload, getLocation nie jest funkcją globalną, więc nie jest znane kodowi podanemu atrybutowi onclick. Właśnie dlatego Twoja przeglądarka zwróciła undefined. Łatwą poprawką jest uczynienie z niej funkcji globalnej. Na przykład:

window.getLocation = function() { ... } 

jednak wymagające zmienne i funkcje, które zostaną zdefiniowane globalnie jest coś, będziemy chcieli, aby uniknąć długoterminowych na większych projektach.

Można to osiągnąć poprzez rezygnację z wykorzystania HTML onclick atrybutów, a bind (non-global) wywołania zwrotne z poziomu głównego kodu:

HTML:

<button id="getloc">Click here</button> 

javascript:

document.addEventListener("DOMContentLoaded", function() { 
    var x = document.getElementById("location"); 

    getloc.addEventListener("click", function() { 
     if (navigator.getlocation){ 
      navigator.getlocation.getCurrentPosition(showPosition,showError); 
     } 
     else{ 
      x.textContent = "GeoLocation is not supported by this browser."; 
     } 
    }); 
    // ... 
}