Uncaught ReferenceError: $ is not a function

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:

 

By Julio MarchiPosted on