将 JavaScript 代码放在单独的文件中不起作用答案

【问题标题】：Putting JavaScript code in a separate file does not work将 JavaScript 代码放在单独的文件中不起作用
【发布时间】：2016-01-30 00:43:40
【问题描述】：

我正在使用 Optimizely guiders.js 示例代码：

http://jeffpickhardt.com/guiders/

尽管如果我提取 JavaScript 代码并将其放在单独的文件中，则不会加载引导程序。

这是编辑后的 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>

我在guidedTour.js 中拥有所有JavaScript 代码，位于同一目录中。所有.js 文件也在同一目录中。并且代码在将其提取到单独的文件中之前工作。

当 JavaScript 在单独的文件中时，指南不会加载。

我在 Chrome 中收到以下错误：

“未捕获的类型错误：无法读取 null 的属性 'clientHeight' jquery-1.5.1.min.js:16"

尝试更新版本的 jQuery 会在 guiders.js 上引发错误。无论如何，这似乎与我将 JavaScript 代码保留在 index.html 中的行为不同。

我为工作代码创建了一个 jsfiddle： http://jsfiddle.net/vpMQy/

我不知道如何在单独的文件中使用 JavaScript 创建类似的 jsfiddle，以便重现问题。

是否可以将此 JavaScript 代码放在单独的文件中？

【问题讨论】：

嗯...您的外部 JavaScript 文件是否有：
@aquinas 我删除了
您是否正确地将您的 JS 包装在 DOM 就绪处理程序中？似乎您正在尝试从null 获取clientHeight，通常意味着您引用的元素尚未在DOM 中。
@Fabrício Matté 此错误来自 jquery 源代码 (jquery-1.5.1.min.js:16)。
@tucson 这并不意味着错误不是来自您在 DOM 准备好之前调用 jQuery 的代码。如果没有找到 jQuery，它会说类似$ is not an object

标签： javascript guiders.js

【解决方案1】：

始终将您的代码包装在 DOM ready 处理程序中

$(document).ready(function() {
    //your code here
});

或者它的简写

$(function() {
    //your code here
});

或者将您的脚本放在文档的最后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>

在 DOM 准备好之前，您不会遇到操作它们的问题。 =]

【讨论】：