Solve - $(...).onclick is not a function jQuery Error


Borislav Hadzhiev

Last updated: Oct 19, 2021


Check out my new book

Solve - $(...).onclick is not a function #

The "$(...).onclick is not a function" error occurs, because there is no onclick() function in jQuery. To solve the error, use the click function instead, e.g. $('#btn').click(function () {}.

jquery onclick is not a function error

$(document).ready(function () { // ⛔️ BAD - uses `onclick` $('#btn').onclick(function () { console.log('Button clicked'); }); // ✅️ GOOD - uses `click` $('#btn').click(function () { console.log('Button clicked'); }); });

Here's a complete working example.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Click me</button> <!-- ✅ load jQuery ✅ --> <script src="" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load your JS file ✅ --> <script src="index.js"></script> </body> </html>

We loaded the jQuery library and then our JS file (index.js in the example).

Here's the code for the index.js file.

$(document).ready(function () { $('#btn').click(function () { console.log('Button clicked'); }); });

We wait for the DOM to be ready and add an event listener to the button using the click function.

The event listener logs a message to the console. If you open your browser and click on the button, you'll see the message in your console.

If you're still getting the error, make sure you're loading the jQuery library only once. Loading the library twice re-runs the initialization process and can cause weird bugs.
Use the search field on my Home Page to filter through my more than 3,000 articles.