Funzioni JavaScript che non funzionano nel file .js esterno

Question

Stavo usando un file .js esterno per il mio JavaScript ma ho riscontrato un problema con il mio HTML che non è riuscito a trovare nessuna delle mie funzioni JavaScript. So che le funzioni funzionano perché se lo spostamento dal file esterno al mio file html funziona correttamente. L'errore che ricevo nella console JavaScript su Chrome è che le mie funzioni non sono definite. So anche che il mio percorso verso la mia pagina esterna funziona perché ho alcuni tag di canvas che stanno leggendo il JavaScript perfettamente bene.

Per ricapitolare, questo funziona:

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

    // ... 
}; 

ma il seguente mi dà l'errore "ReferenceError Uncaught: getLocation non è definito":

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."; 
     } 
    } 
    // ... 
} 

non è un problema enorme dato che posso solo tenere il JavaScript nel mio file HTML ma ci vuole un sacco di spazio e io preferirei tenere tutto organizzato. Se qualcuno sa come potrei risolvere questo problema, sarebbe molto apprezzato.

Answer 1

Come avete definito la vostra funzione (s) all'interno del window.onload richiamata, getLocation non è una funzione globale, quindi non è noto per il codice fornito per l'attributo onclick. Questo è il motivo per cui il tuo browser ha restituito undefined. La soluzione semplice è invece renderla una funzione globale. Per esempio:

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

Tuttavia, le variabili che richiedono e le funzioni da definire a livello globale è qualcosa che si vuole evitare a lungo termine su progetti di grandi dimensioni.

È possibile raggiungere questo obiettivo, abbandonando l'uso di HTML onclick attributi, e legano callback (non globale) dall'interno del codice principale:

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."; 
     } 
    }); 
    // ... 
}