guiders.js - Putting JavaScript code in a separate file does not work

I am working with Optimizely guiders.js example code:

Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.

Here is the edited 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 .js files are also in same directory. And the code worked before extracting it in separate file.

The guiders do not load when JavaScript is in separate file.

I am getting the following error in Chrome:

"Uncaught TypeError: Cannot read property 'clientHeight' of null jquery-1.5.1.min.js:16"

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.

I have created a jsfiddle for the working code: /

I do not know how to create a similar jsfiddle with the JavaScript in a separate file so that I can reproduce the problem.

Is it possible to put this JavaScript code in a separate file?

I am working with Optimizely guiders.js example code:

http://jeffpickhardt./guiders/

Though if I extract the JavaScript code and place it in a separate file, the guiders do not load.

Here is the edited 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 .js files are also in same directory. And the code worked before extracting it in separate file.

The guiders do not load when JavaScript is in separate file.

I am getting the following error in Chrome:

"Uncaught TypeError: Cannot read property 'clientHeight' of null jquery-1.5.1.min.js:16"

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.

I have created a jsfiddle for the working code: http://jsfiddle/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.

Is it possible to put this JavaScript code in a separate file?

Share Improve this question edited Jan 29, 2016 at 16:43 dsolimano 8,9963 gold badges51 silver badges65 bronze badges asked Aug 13, 2012 at 16:30 Timothée HENRY 14.6k22 gold badges98 silver badges138 bronze badges

Hmmm...do your external JavaScript files have: <script> tags? (They shouldn't ifi they do). – aquinas Commented Aug 13, 2012 at 16:33
@aquinas I removed the <script> tags. And putting just a javascript alert() worked. – Timothée HENRY Commented Aug 13, 2012 at 16:35
5 Did you wrap your JS inside DOM ready handlers properly? Seems like you're trying to get the clientHeight from null, usually means that the element you're referencing is not in the DOM yet. – Fabrício Matté Commented Aug 13, 2012 at 16:46
@Fabrício Matté This error es from the jquery source code (jquery-1.5.1.min.js:16). – Timothée HENRY Commented Aug 13, 2012 at 16:55
@tucson That doesn't mean that the error is not from your code calling jQuery before the DOM is ready. If jQuery wasn't found, it would say something like $ is not an object – Ruan Mendes Commented Aug 13, 2012 at 16:56

| Show 4 more ments

1 Answer 1

Sorted by: Reset to default 13

Always wrap your code inside the DOM ready handler

$(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:

    //...
    <script type="text/javascript" src="http://code.jquery./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. =]

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

guiders.js - Putting JavaScript code in a separate file does not work - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)