Console says "$ is not defined" on a basic jquery code

Question

This is my code which doesn't work:

$(document).ready(function() {
 $(document).on('click', '.item', function() {
  $(this).width(120);
 });
});

.item {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: red;
 margin-right: 10px;
 display: inline-block;
 cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
 <title>jQuery</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

In the browser console it says "$ is not defined" as soon as the page loads. What is the problem?

You forgot to include jquery in your scripts – fbid Feb 21 '16 at 16:49 — fbid, Feb 21 '16 at 16:49
jQuery is not loaded. Load it. – Omri Aharon Feb 21 '16 at 16:49 — Omri Aharon, Feb 21 '16 at 16:49

score 2 · Answer 1 · answered Feb 21 '16 at 16:49

2

You have to add the JQuery library,

You can add it in the head section

or right before the script.js import

answered Feb 21 '16 at 16:49

Felix Cen

733
1
6
24

score 2 · Answer 2 · answered Feb 21 '16 at 16:51

In your <head>, you should import the JQuery library otherwise you won't be able to use JQuery functions:

<script type="text/javascript" src="path/to/jquery.js"></script>

You can also link to online versions of it:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

JQuery is an external library which means it isn't included in your standard Javascript functionality - you need to import it using the above method in order to make its functionality available for your code to use.

You can download the library from http://jquery.com/download/ or you can use an online version like in my second example. If you download your own version from their website, you then just put it in a folder inside your project and link to it the same way you have done for your other script.

Console says "$ is not defined" on a basic jquery code

2 Answers2