Uncaught ReferenceError: $ is not a function

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= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </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>