Jump to content

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.


Link to comment
Share on other sites

  • 2 years later...

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


Link to comment
Share on other sites

  • Funce locked this topic
This topic is now closed to further replies.

  • Create New...