Javascript 函数在外部 .js 文件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16369212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript functions not working in external .js file
提问by David Suzuki Moore
I was using an external .js file for my JavaScript but I have encountered a problem with my HTML not being able to find any of my JavaScript functions. I know the functions work because if I move it from the external file to my html file it works fine. The error I get in the JavaScript console on Chrome is that my functions are not defined. I also know that my path to my external page works because I have some canvas tags that are reading the JavaScript perfectly fine.
我在 JavaScript 中使用了外部 .js 文件，但遇到了 HTML 无法找到任何 JavaScript 函数的问题。我知道这些功能有效，因为如果我将它从外部文件移动到我的 html 文件，它就可以正常工作。我在 Chrome 上的 JavaScript 控制台中得到的错误是我的函数没有定义。我也知道我的外部页面路径有效，因为我有一些画布标签可以完美地读取 JavaScript。
To recap, this works:
回顾一下，这有效：
HTML:
HTML：
<canvas id="Canvas7"></canvas>
JavaScript:
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);
// ...
};
But the following gives me the error "Uncaught ReferenceError: getLocation is not defined":
但以下给了我错误“Uncaught ReferenceError: getLocation is not defined”：
HTML:
HTML：
<button onclick="getLocation()">Click here</button>
JavaScript:
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.";
}
}
// ...
}
It's not a huge issue since I can just keep the JavaScript in my HTML file but it takes up a lot of space and I would prefer to keep everything organized. If anyone knows how I could solve this issue it would be much appreciated.
这不是一个大问题，因为我可以将 JavaScript 保留在我的 HTML 文件中，但它占用了大量空间，我更愿意让所有内容都井井有条。如果有人知道我如何解决这个问题，将不胜感激。
回答by u4370109
As you have defined your function(s) within the window.onloadcallback, getLocationis not a global function, so it is not known to the code provided to the onclickattribute. This is why your browser returned undefined. The easy fix is to make it a global function instead. For example:
由于您在window.onload回调中定义了您的函数，getLocation它不是全局函数，因此提供给onclick属性的代码不知道它。这就是您的浏览器返回 的原因undefined。简单的解决方法是让它成为一个全局函数。例如：
window.getLocation = function() { ... }
However, requiring variables and functions to be defined globally is something you'll want to avoid long term on larger projects.
但是，在大型项目中，您需要长期避免要求全局定义变量和函数。
You can achieve this, by abandoning the use of HTML onclickattributes, and bind (non-global) callbacks from within your main code:
您可以通过放弃使用 HTMLonclick属性并从主代码中绑定（非全局）回调来实现这一点：
HTML:
HTML：
<button id="getloc">Click here</button>
JavaScript:
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.";
}
});
// ...
}
