Javascript函数在外部.js文件中不起作用

我在JavaScript中使用了一个外部的.js文件，但是我遇到了一个问题，我的HTML无法找到任何JavaScript函数。我知道这些函数可以工作，因为如果我将它从外部文件移动到html文件，它就可以正常工作。我在Chrome上的JavaScript控制台中遇到的错误是没有定义我的函数。我还知道我的外部页面路径是有效的，因为我有一些画布标记，可以很好地读取JavaScript

总而言之，这是有效的：

HTML:

但下面给出了错误“UncaughtReferenceError:getLocation未定义”：

HTML:

---

这不是一个大问题，因为我可以在我的HTML文件中保留JavaScript，但它占用了很多空间，我更愿意保持一切井然有序。如果有人知道我如何解决这个问题，我将不胜感激

正如您在

窗口中定义的函数。onload

回调，

getLocation

不是全局函数，因此提供给

onclick

属性的代码不知道它。这就是浏览器返回未定义的

的原因。简单的解决办法是将其改为全局函数。例如：

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

然而，要求全局定义变量和函数是您希望避免在大型项目中长期使用的

您可以通过放弃使用HTML
onclick
属性，并从主代码中绑定（非全局）回调来实现这一点：

HTML:

您确定在触发onclick事件之前正在执行JavaScript吗？@DonovanGlover我发布的所有JavaScript都在'window.onload=function（）内{'而且我的画布上所有8个标记的javascript都能正常工作。只是每次我创建一个函数时，chrome都会给我一个未捕获的引用错误：getLocation未定义错误。你能发布你使用的带有外部javascript文件路径的
标记语法吗？作为提醒，javascript在一个外部文件中，yo在通过使用
语法触发单击事件之前，您需要将javascript加载到页面上。@DavidSuzukimore这不是全局函数，因此您的浏览器返回未定义的函数。您需要使用例如：
window.getLocation=function（）{…}使其成为全局函数
。@garromark脚本标记为
该.js文件与.html和.css文件位于同一目录文件夹中。
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);

    // ...
};

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

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

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

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

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