Practicum Bootcamp
Published in

Practicum Bootcamp

Debugging the error: $ is not defined

If you’ve ever tried to make your own website, chances are, you’ve encountered this error:

$ is not defined

You’d get this error in the console window of your browser when you’re trying to get something to work, like an image slider, a navigation menu, or some sort of web-based visual effect. Here’s what this error means and how to move past it.

The short answer

“$ is not defined” is a JavaScript error you’ll get if either one of these conditions is true:

  1. Some script you’re using on a page is calling for a jQuery function, and jQuery is not loaded yet.
  2. jQuery had to be loaded, and something broke, so it couldn’t load.

To fix the issue:

  1. Make sure to include the jQuery import before you call jQuery. For example, if you’re adding a photo gallery, make sure your lines go in the following order;
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src=”your photo gallery”></script>
  2. If you’ve already called jQuery before your main script, then make sure the URL of jQuery is readable from where you are. Perhaps there’s a typo in your URL, or the site that hosts jQuery is inaccessible at the moment.
  3. For a sure-fire solution: download a stable build of jQuery, and put it on your site, next to your pages. Load jQuery not from some other site, but from your own site. This will make jQuery completely accessible.

The long answer

What is JavaScript? JavaScript is a language that helps you manipulate things on a webpage. It’s kind of like a programming language, except you use JavaScript to work with websites, not separate programs. You can use JavaScript to validate web forms, build beautiful interfaces, make sophisticated web apps, and even build browser-based games. JavaScript runs in your browser and is used on practically every site. A popup, a dropdown menu, an ‘Add to Cart’ button — all of these use JavaScript.

What is jQuery? jQuery is a JavaScript library that makes it easier for you to use scripts to work with HTML documents. For example, if you wanted to use regular JavaScript to change something on a webpage, you’d use this line of code:

document.getElementById(‘someElement’).innerHTML=’Some New Text’;

But with jQuery, it’s like this:

$(“#someElement”).html(“Some New Text”);

To use jQuery, you need to load it first. The easiest way to do this is to include the following line in your webpage:

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

What does ‘$’ mean? In JavaScript itself, $ doesn’t mean anything specific. But jQuery uses this symbol as an access point. Most jQuery commands start with $. So, if you see a JavaScript code that reads something like $(…), then you’re looking at jQuery.

What does it mean when something is not defined? In JavaScript, you can have objects and functions. To put it very simply, these are like small programs that do specific things. When you want to execute a function or do something to an object, you need to first define that function or object. You can’t do anything to something that you haven’t defined.

So, you need to define an object first, then call it.

‘$ is not defined’ means that an object (or a function) named ‘$’ hasn’t been defined by the time it was called. And since we know that ‘$’ is an access point for all things jQuery, we can infer that jQuery itself hasn’t been defined.

Can $ mean something else? Sure, you can define your own function or create an object named ‘$’ and make it do whatever you like. But then jQuery won’t work.

Found this tutorial helpful? Feel free to browse the resources at Practicum. We provide education and mentorship to help you build essential tech skills and amp up your career.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Practicum Bootcamp

Practicum Bootcamp

Practicum Bootcamp is a family of digital re-skilling products. https://practicum.com/