'$' was used before it was defined

Question

This is my first time trying to use JQuery and I was trying to add an event when the document is ready, but every time it says:

"$ was used before defined".

I don't know how to solve it. I tried different solutions on the internet but couldn't find any. Don't really know what I am doing wrong.

I referenced the HTML file to the js file like this

<!DOCTYPE html>
<html>
<head>
    <title>Experimenting with Javascript</title>
    <script type="text/javascript" src="script.js"></script>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>

and this is my script

$(document).ready(function () {
  "use strict";
    $('div').mouseenter(function () {
      $(this).animate({
        height: '+=10px'
    });
  });
});

You need to [include the jQuery library](http://learn.jquery.com/about-jquery/how-jquery-works/) in your page to use it! — Bergi, Nov 05 '14 at 19:13
If you don't even know how to use a library, I would recommand not using `"use strict";`, which can cause problems when you have no experience with it (see [this](https://bugzilla.mozilla.org/show_bug.cgi?id=579119), even Amazon screwed up with it). — blex, Nov 05 '14 at 19:18
@blex: If you have no experience with it (or javascript in general) that's a *great time* to start using `"use string";`, so that you CAN get used to it, and you develop good coding habits. — Colin DeClue, Nov 05 '14 at 19:24
Maybe this a common case of thinking that jQuery is a synonym for JavaScript. jQuery is a library written in JavaScript. — Cᴏʀʏ, Nov 05 '14 at 19:52

score 4 · Accepted Answer · answered Nov 05 '14 at 19:16

4

Reference the JQuery library in your page, like this

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Include this tag above the script tag of your js file

answered Nov 05 '14 at 19:16

Otávio Bogoni

125
6

score 1 · Answer 2 · answered Nov 05 '14 at 19:15

1

Add JQuery library (http://jquery.com/)
Adding a event on every div in your app - rethink this. Add a class or something, and add it to a single element container, or a body, but don't add it to most common element.

answered Nov 05 '14 at 19:15

Beri

11,470
4
35
57

Yes i am not intending to use it on every div there is, but this was just for a test – Tycho Atsma Nov 05 '14 at 19:17

score 1 · Answer 3 · answered Nov 05 '14 at 19:41

You should organize your HTML DOM like that :

<!DOCTYPE html>
<html lang="en" class="">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Experimenting with Javascript</title>    
        <link type="text/css" rel="stylesheet" href="main.css" />
    </head>

<body>
    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

1.You should call Jquery library before calling your project JS file's.

score 0 · Answer 4 · answered Nov 05 '14 at 19:18

The problem here is that you are using jQuery without actually including that library of code in your HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>Experimenting with Javascript</title>

    <link type="text/css" rel="stylesheet" href="main.css" />
</head>

<body>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

Just to clarify, jQuery is a library that acts on top of JavaScript so you would need to include that library above your own scripts that use it.

NOTE: It is best practice to include your scripts just before your closing body tags.

'$' was used before it was defined

4 Answers4