Skip to content
Related Articles

Related Articles

Uncaught ReferenceError: $ is not a function

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 19 May, 2022

In this article, we will see the “Uncaught ReferenceError: $ is not a function“. The ReferenceError is an object that represents an error that arises when the variable is not initialized or simply, variable doesn’t exist in the current scope & it is referenced. 

The $ sign is an alias of jQuery. The $ is not defined ReferenceError usually arises when jQuery is not loaded and JavaScript is not recognizing the $ symbol. 

To solve this error, first, use jQuery CDN link inside the head section or download the jQuery file and use the jQuery file link inside the head section.

Example: This example creates a ReferenceError because jQuery is not loaded and JavaScript does not recognize the $ symbol.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").hide();
            });
        });
    </script>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
    <p>This example shows when the $ is not defined.</p>
    <button>Hide Content</button>
</body>
</html>

Output:

 

To solve this error, we simply add the jQuery CDN link or downloaded jQuery path link inside the head section.

jQuery CDN Link:

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

Example: This example resolves the error by adding the required CDN link inside the <script> tag.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").hide();
            });
        });
    </script>
</head>
  
<body>
    <h2>GeeksforGeeks</h2>
    <p>
        This example shows when the $ is not
        defined error arises due to the required
        CDN link being defined
    </p>
    <p>Click the button to see the change</p>
    <button>Hide Content</button>
</body>
</html>

Output:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!