jQuery initial set up

I am getting following errorr message: “Uncaught ReferenceError: $ is not defined”, reffering to part of the code:

$(document).ready(function() {
  getData();
  $("#new-quote").on("click", getData);
});

My html setup looks like bellow:

< !DOCTYPE html/>
< html>
< script>
  
   $(document).Ready(function() {
   });
< /script>
< script src="js/scripts.js"></script>

I assume this is connected to the incorrect setup of jQuerry in JavaSript (or in HTML?). There is help on the Internet with regards to the jQuerry setup. However, it appears to be case-specific, or it takes me further to the levels that are beyond my reach at this point.

Please help.

What does your html look like? How are you bringing in the jQuery library?

for some reason I can not copy my code in this reply. I will edit my post with this additional information.

In the reply editor, either click the code button in the menu bar (looks like an empty html tag) or on the line before and after your code, place three backticks.

My html setup looks like bellow:

< !DOCTYPE html/>
< html>
< script>

$(document).Ready(function() {
});
< /script>
< script src=“js/scripts.js”>

And is that script.js your jQuery library?

No, apparetnly. Honestly, I am lost with this.
Where my jQuery should be located (localy, on my computer, or in a cloud)?
What jQuerry library should I pick (there is more of them)?
Where should I put this library (HTML or JavaSript)?
What does it actually do?

No need for you to spend time to answer all of this. I will figure it out (eventually). I just need help to get my project to continue.

So, starting from scratch, would you please help me to pick correct jQuerry set up link and help me with info where to place it.

Thanx.

It doesn’t matter if you get it from a CDN or have a local file, the only important part is that you get it in before your own script. If you try to use jQuery’s $ before the jQuery script is loaded, your script has no clue what that character is supposed to mean.

You can either download the source code from jquery.com (click the download link, and save all the code you’ll see in a jquery.js file on your computer), or use a CDN:

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

An example how to bring it all into you HTML (btw use the </> button if you want to enter code in the forum):

<!DOCTYPE html />
<head></head>
<body>
    <h1>My page</h1>
  
  ...

  <script src="location/of/jquery.js"></script>
  <script src="location/of/your-script.js"></script>
</body>

The jQuery library adds functionality to JavaScript that wasn’t available before. Note that nowadays, a lot of that functionality has found its way into JavaScript, making jQuery rather obsolete. You won’t find much temporary code that uses it, but due to its past popularity, it’s still very present everywhere, so it doesn’t hurt to learn it (it’s not difficult anyway). On a sidenote (personal opinion), I’d learn JavaScript first, at least the basics.

There’s only jQuery library. As for the version, I’d go for the latest but it shouldn’t really matter much.

2 Likes

Thank you very much for taking the time to explain this in detail.
I appreciate it.

P.S. To my “defence” :smiley: , I completed all the JavaScipt lessons in freeCodeCamp (Basic. ES6, Regular Expressions, etc.)
I would NOT be bothering people with questions absent this basic step :smiley:

Pleasure, I just liked your avatar.

One addition - jQuery is a library that is (was) supposed to simplify DOM manipulation, but fCC doesn’t teach that in the JavaScript lessons. If you learn DOM manipulation with jQuery instead of plain JS, you’ll have to unlearn a lot of things later. Proceed at your own peril :vulcan_salute:

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Live long and prosper.
:smiley:

Will do as instructed. Thanx.

Hi again,
I’d like to provide a bit of a feeback, just in case somebody else gets tangled with project set up in CodePen, the way I did.

Mistake 1: In JS, I set up Babel preprocesor (still trying to fully comprehend the role of preprocessors :sweat_smile:).

Mistake 2: Initial setup in HTML (!DOCTYPE) is not necessary. CodePen HTML comes with pre-installed initial setup. Adding any of this in HTML will cause an error.

Mistake 3: I did not set up jQuery library in JS section of the CodePen at all. Once this is done, there is no need to type $(document).Ready function into JS code (it will cause an error).

Furthermore, jQuery library that containes “min.js” should be added. One that containes “bundle” will not work.

I’ve modified all of this and my code seems to be running fine. In case someone else gets caught up in this, I hope this will help.

All the best.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.