Javascript函数无法在外部.js文件中运行

Question

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

总结一下,这有效:

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

    // ...
};

但是下面给出了错误"Uncaught ReferenceError:getLocation is not defined":

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

这不是一个大问题,因为我可以将JavaScript保存在我的HTML文件中,但它占用了大量空间,我宁愿保持一切井井有条.如果有人知道如何解决这个问题,我将不胜感激.

Answer 1

由于您在回调中定义了函数window.onload，getLocation所以它不是全局函数，因此提供给属性的代码不知道它onclick。这就是您的浏览器返回的原因undefined。简单的解决方法是将其设为全局函数。例如：

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

但是，在大型项目中长期需要避免要求全局定义变量和函数。

您可以通过放弃使用 HTMLonclick属性并从主代码中绑定（非全局）回调来实现此目的：

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