将 JavaScript 代码放在单独的文件中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11938439/
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
Putting JavaScript code in a separate file does not work
提问by Timothée HENRY
I am working with Optimizely guiders.js example code:
我正在使用 Optimizely guiders.js 示例代码：
http://jeffpickhardt.com/guiders/
http://jeffpickhardt.com/guiders/
Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.
虽然如果我提取 JavaScript 代码并将其放在一个单独的文件中，引导程序不会加载。
Here is the edited HTML:
这是编辑后的 HTML：
<html>
<head>
<!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="guider.js"></script>
<script type="text/javascript" src="guidedTour.js"></script>
<link rel="stylesheet" href="guider.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
<br />
<img src="clock.gif" width=150 height=150 />
</span>
</body>
</html>
I have all the JavaScript code in guidedTour.js, in the same directory.
All .jsfiles are also in same directory. And the code worked before extracting it in separate file.
我在guidedTour.js, 中的所有 JavaScript 代码都在同一目录中。所有.js文件也都在同一目录中。并且代码在将其提取到单独的文件中之前工作。
The guiders do not load when JavaScript is in separate file.
当 JavaScript 位于单独的文件中时，不会加载指南。
I am getting the following error in Chrome:
我在 Chrome 中收到以下错误：
"Uncaught TypeError: Cannot read property 'clientHeight' of null jquery-1.5.1.min.js:16"
“未捕获的类型错误：无法读取 null jquery-1.5.1.min.js:16 的属性‘clientHeight’”
Trying a more recent version of jQuery throws an error on guiders.js.
Anyway it seems a different behavior than if I keep the JavaScript code in the index.html.
尝试更新版本的 jQuery 会在guiders.js. 无论如何，这似乎与我将 JavaScript 代码保留在index.html.
I have created a jsfiddle for the working code: http://jsfiddle.net/vpMQy/
我为工作代码创建了一个 jsfiddle：http: //jsfiddle.net/vpMQy/
I do not know how to create a similar jsfiddle with the JavaScript in a separate file so that I can reproduce the problem.
我不知道如何在单独的文件中使用 JavaScript 创建类似的 jsfiddle，以便我可以重现该问题。
Is it possible to put this JavaScript code in a separate file?
是否可以将此 JavaScript 代码放在单独的文件中？
回答by Fabrício Matté
Always wrap your code inside the DOM readyhandler
始终将您的代码包装在DOM 就绪处理程序中
$(document).ready(function() {
//your code here
});
Or its shorthand
或者它的简写
$(function() {
//your code here
});
Or put your scripts at the very end of the document's body:
或者将您的脚本放在文档的最后body：
//...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</body>
And you won't have problems manipulating them DOM before it's ready. =]
并且在 DOM 准备好之前操作它们不会有问题。 =]
