Linking script.js and html5

Question

So Ive been going through some of the codeacademy stuff on HTML/CSS and Jquery.

Having a bit of trouble trying to get my code to work outside on my local machine.

Here is my HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Krypton Redux</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>    </head>

    <body>

        <div></div>
        <div style = "margin:10"></div>
        <div></div>
    </body>
</html>

here is my jQuery

$(document).ready(function(){
    $('div').draggable();
});

When I write the jQuery code directly in my HTML file then open it in Chrome, it works. However when doing it in a .js file I get an error saying that '$' is not recognized. Anyone have any idea why?

Are you including your JS file before or after the jQuery library? — Tim Wasson
– Tim Wasson, Commented Jun 4, 2013 at 19:55

War10ck · Accepted Answer · 2013-06-04 19:58:59Z

3

The $ is the jQuery alias. If you are using the $ in your script, jQuery must be defined before your script. It's a simple fix. Rearrange your script links like so:

<!-- Load jQuery first -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<!-- Since you use jQuery UI in your script as well, load it second. -->
<!-- Note however that jQuery Core must be included before UI because it's a dependency -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!-- Finally, load your script -->
<script type='text/javascript' src='script.js'></script>

Hope this helps.

answered Jun 4, 2013 at 19:58

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Lemiesz Over a year ago

Thanks alot. That was a pretty careless mistake. I assumed that the HTML file would load everything first before any script is exceuted

War10ck Over a year ago

@RobertLemiesz Haha. No worries buddy. It happens to the best of it. My understanding, and I still could be wrong on this, as that each script file is parsed fully right after it's downloaded before continuing on to the next. This site has a lot of "best practices" tips.

Kevin Kulla · Accepted Answer · 2013-06-04 19:55:16Z

3

Add the script.js below the jQuery script.

<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type='text/javascript' src='script.js'></script>

answered Jun 4, 2013 at 19:55

Kevin Kulla

4603 silver badges21 bronze badges

Collectives™ on Stack Overflow

Linking script.js and html5

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related