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() { ... }

但是，要求全局定义变量和函数是您希望避免在较大项目上长期使用的问题。

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

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

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

1 个答案: