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

tuc*_*son 2 javascript guiders.js

我正在使用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>
Run Code Online (Sandbox Code Playgroud)

guidedTour.js在同一目录中包含所有JavaScript代码.所有.js文件也在同一目录中.并且代码在单独的文件中提取之前有效.

当JavaScript位于单独的文件中时,指南不会加载.

我在Chrome中收到以下错误:

"未捕获的TypeError:无法读取null jquery-1.5.1.min.js的属性'clientHeight':16"

尝试更新版本的jQuery会引发错误guiders.js.无论如何,它似乎与我保留JavaScript代码的行为不同index.html.


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

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

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

Fab*_*tté 12

始终将代码包装在DOM就绪处理程序中

$(document).ready(function() {
    //your code here
});
Run Code Online (Sandbox Code Playgroud)

或者它的速记

$(function() {
    //your code here
});
Run Code Online (Sandbox Code Playgroud)

或者将您的脚本放在文档的最后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>
Run Code Online (Sandbox Code Playgroud)

在准备好之前,你不会有操纵它们的问题. =]