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 Kevin Faust
Kevin Faust
15,353 Points

Reference error: $ is not defined on line 1

Hello everyone,

For some reason, when I load my site and check the console, this error keeps appearing supposedly on line 1. I made sure i linked to jquery and i also checked my code over and over and everything looks fine.

Basically what I want to happen is that when I click the home button, the menu which is currently offscreen is to slide into view. and then when I click the picture on the menu bar, the menu bar is to slide back out of view. I believe that my code is correct but im not completely certain.

Any help would be appreciated. Cheers

2 Answers

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Kevin.

Word of advice: always link your jQuery script into the document header - See below:

<!DOCTYPE html>
<html>
  <head>
    <title>Kevin Faust | Developer</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <div id="headerbar">
      <div id="bodybutton"></div>
    </div>

    <div class="menucontainer">
      <div id="menutitlewrap">
        <div id="menupicture"></div>
          <h3>Menu</h3>
            <ul id="listmenu">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Gallery</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
        </div>
      </div>
    <script src="js/app.js" type="text/javascript"></script>
  </body>
</html>

As you wrote your code you call your custom function before the jQuery file is even loaded and thats why you get the error.

REMEMBER: These links and script you append to your HTML file have a Cascading rule which simply means that the browser reads the files that are added from !"top to bottom"!

If you add a script that depends on jQuery before you add jQuery itself you'll stand before a wall because jQuery has to be loaded before you add your script, if not then you get an error because the browser expects jQuery to be loaded before you add your script.

Hope that clears things up a bit.

Happy Coding!!!

nWEBd

Kevin Faust
Kevin Faust
15,353 Points

Thanks Nejc. Makes alot of sense now

Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Kevin you are welcome.

For easier and faster problem solving always try to remember and add your code ;)

Have fun Coding!

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

Hi Kevin.

It looks like your jQuery isn't linked correctly.

Please share your code or we won't be able to help you.

Kevin Faust
Kevin Faust
15,353 Points

sorry i forgot to attach my screenshot. here it is: https://w.trhou.se/re47q2g8xd