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 jQuery Basics (2014) Introduction to jQuery Ways to Include jQuery in a Project

Posted by Kyle Papili
Kyle Papili
9,112 Points

jQuery Code Not Working

I am using the EXACT code he has done in this video. I have tried it on the workspace and it seems to work fine there. However when I download the workspace files and try to run them locally on my Mac, the jQuery does not work.

My Code: (index.html)

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Take Evasive Action</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <p class="warning">
    <span>It's A Trap!</span>
  </p>
  <div class="image">
    <img src="img/ackbar.gif" />
  </div>
</body>
</html>

My Code: (js/app.js)

js/app.js 
function myCode() {
    $(".warning").hide().show("slow");
}

$(document).ready(myCode);
Zeljko Porobija
Zeljko Porobija
11,491 Points
Zeljko Porobija
Zeljko Porobija
11,491 Points

Your app.js should go like this: $(".warning").hide().show("slow"); While your index.html should have script tags moved to the bottom of the body (for including jQuery and JavaScript in a proper order, after the document has been loaded).

3 Answers

Emma Davis
Emma Davis
4,760 Points
Emma Davis
Emma Davis
4,760 Points

A few things I would suggest:

  1. Open up the JavaScript Console and see if there are any errors there (this may be with code or even that the scripts can't be found etc)
  2. Move the script tags and their contents to just before the closing </body> tag as this is where they should be really so that the rest of the page can load before trying to run any JS or jQuery scripts
  3. Change your app.js to have the document ready function wrapped around all the code (keeps it all a bit easier to understand), plus you have it slightly wrong (missing the function()), it should be:
$(document).ready(function() {

function myCode() {
    $(".warning").hide().show("slow");
}

myCode();

});
Kyle Papili
Kyle Papili
9,112 Points

Thank you for your suggestion, I actually solved my problem by using a different CDN. I suppose that the original jQuery site was down for some reason. I am now using the google hosted CDN and it seems to be working fine. THANKS THOUGH!

Paul Miller
Paul Miller
4,319 Points
Paul Miller
Paul Miller
4,319 Points

Use other CDN. code.jquery.com/jquery-1.11.3.min.js is not working!

Ikuyasu Usui
Ikuyasu Usui
36 Points
Ikuyasu Usui
Ikuyasu Usui
36 Points

It works if you change the order of js files: <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

Because app.js uses a jQuery, jQuery file should come first.