7

我为我的 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);

    // ...
};

但以下给了我错误“未捕获的 ReferenceError：getLocation 未定义”：

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 文件中，但它会占用大量空间，我更愿意将所有内容保持井井有条。如果有人知道我如何解决这个问题，将不胜感激。

4

1 回答 1

2

由于您在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.";
        }
    });
    // ...
}
于 2015-01-26T14:09:54.637 回答