Jump to content
ben03

Uncaught ReferenceError: $ is not defined

Recommended Posts

Hi there, 

I was following this a tutorial about adding a page fade-in once the page has loaded. It is set up so it works even if javascript is disabled, which is ideal. https://www.abeautifulsite.net/a-clean-fade-in-effect-for-webpages

However i am trying to add another class the snippet to the script tag that appears immediately after the opening <body> tag: 

<script>document.body.className += ' fade-out'; $(".wrap").addClass(" fade-out");</script>

However I am getting the following error: "Uncaught ReferenceError: $ is not defined". I am assuming this is because I am not calling in jquery in the header? But why then does it work fine without my additional snippet?

Maybe I am taking the wrong approach here, let me know if this could work.

Thanks

Share this post


Link to post
Share on other sites

You have vanilla JavaScript, and jQuery doing the same in adding a class. The plain JavaScript  will work fine, as it does not need a link to files etc to run, but jQuery does, hence the error

Share this post


Link to post
Share on other sites

Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.

To solve this error:

Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

There can be multiple other reasons for this issue:

  • Path to jQuery library you included is not correct
  • The jQuery library file is corrupted
  • Working offline
  • Conflict with Other Libraries

 

Share this post


Link to post
Share on other sites

Please do not reply to old posts.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...