Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Andrew Stelmach
Andrew Stelmach
12,583 Points

jQuery not working

I have a project (building a web page) on my PC. It's not hosted anywhere: just a html file and two css files.

I want to experiment with jQuery on the page, so I pasted the code from jquery.com/download 'use jQuery with a CDN' into my html:

<head>
        <meta charset="utf-8">
        <title>The Three Kings English Language Academy | English Language Teaching in Pamplona, Spain
        </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="js/javascript.js" type="text/javascript" charset="utf-8"></script>
    </head>

In the javascript.js file I wrote the following code:

var appearslowly = function () {
    $(".main-logo").hide().show("slow");
}

$(document).ready(appearslowly);

When I refresh my page in the browser, nothing happens to the .main-logo, the page just displays like it did before. In the console there is the error:

Failed to load resource: net::ERR_FILE_NOT_FOUND file://code.jquery.com/jquery-1.11.0.min.js Uncaught ReferenceError: $ is not defined javascript.js:5

So, I'm assuming that means it's not loading jQuery. What's going on?

Andrew Stelmach
Andrew Stelmach
12,583 Points

I've since changed the jQuery code (making the function anonymous instead and putting it straight into 'ready':

$(document).ready(function () {
    $(".main-logo").hide().show("slow");
});

Now, the console returns: GET file://code.jquery.com/jquery-1.11.0.min.js net::ERR_FILE_NOT_FOUND 3kings.html:9 Uncaught ReferenceError: $ is not defined javascript.js:1

Probably the same sort of error as before, I expect.

2 Answers

Philip G
Philip G
14,601 Points

You need to add http:// or https:// before //code.jquery.com/jquery-1.11.0.min.js, because when you open the webpage from your computer, the browser tries to load jquery your local filesystem.

Failed to load resource: net::ERR_FILE_NOT_FOUND file://code.jquery.com/jquery-1.11.0.min.js Uncaught ReferenceError: $ is not defined javascript.js:5

Example:

<head>
        <meta charset="utf-8">
        <title>The Three Kings English Language Academy | English Language Teaching in Pamplona, Spain
        </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="js/javascript.js" type="text/javascript" charset="utf-8"></script>
    </head>

PS: For website-testing purposes you should use XAMPP.

Andrew Stelmach
Andrew Stelmach
12,583 Points

What's 'XAMPP'?

Andrew Stelmach
Andrew Stelmach
12,583 Points

It worked, and makes sense. Thanks.

Philip G
Philip G
14,601 Points

Xampp is the most popular local web server package. It's very usefull and I recommend you to install it. https://www.apachefriends.org/index.html

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Hi Andrew!!! I don't really know what the problem is. It seems like you got it right. If there's still a problem, I suggest you can try this:

  • make sure you have the internet connection (download jQuery CDN)

  • the script tags should put in the body tags (before the closing body tags </body>)

At last, you can post all your html, css and js code, so I can test it for you.

Good luck

Philip G
Philip G
14,601 Points

I know and already posted a solution :)

Sreng Hong
Sreng Hong
15,083 Points

Cool then