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

avatar

Borislav Hadzhiev

Tue Oct 19 20211 min read

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

index.js
$(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.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Click me</button> <!-- โœ… load jQuery โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" 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.

index.js
$(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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee