Last Updated on August 18, 2022 by Roshan Parihar
In this tutorial, learn how to declare function and call on click using jQuery. The short answer is to use the function word followed by the function name to declare a function.
You can use the onclick attribute or jQuery click event using click() function to call a function on click.
Let’s find out how to declare a function and call on click event with the examples given below.
How to Declare Function Using jQuery
To declare a function, you have to use the function word followed by the function name. Here, you need to change the function name with the name of the function you want to create. Inside that function, put the jQuery code you want to execute when you call the created function.
|
1 2 3 4 5 |
<script> function FunctionName(){ //Enter your code here to execute on call; } </script> |
The above syntax contains the simple function with a little bit of code as a comment to execute on call. This is a simple yet efficient method to reduce writing the same code multiple times. This can reduce wastage of time and increase code reusability.
When you want to create a piece of code, sometimes you may require that code in many places. To reduce the extra effort and save time writing code again and again. You just need to call only the function and the code gets executed anywhere automatically when required.
How to Call a Function On Click Using jQuery
After you declare a function, you need to call it where you want to execute that piece of code. You need to first find at what event you want to execute the code.
Here, you have to create a function and call that function when someone clicks on the button. You just need to use the click() function and place the function inside it to call it on the click event. The code gets executed automatically when someone clicks on the button.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function() { function myFunction(){ alert('This is an alert message.'); } $('.mybtn').click(function(){ myFunction(); }); }); </script> <button type="button">Click me</button> |
Output
Click the below button to get an alert message using the jQuery function call.
You have to click the above-given button to execute the function and run the code inside the function on click. It will give you an alert message box given in the function. Now, you can change the piece of code given in the function as per your requirements.
The above example contains the function and the click event. To define a function using jQuery, you need to use the above example. The function contains the alert message which will show when the user clicks on the button.
Use Onclick Attribute on Button to Call a Function in jQuery
In addition to the above example, you can also use the HTML onclick() attribute to call the function on button click. It is a simple method where you don’t need to use the jQuery script for calling functions on click. See the example given below to learn the technique.
|
1 2 3 4 5 6 |
<script> function myFn(){ alert('This is an alert message box using onclick attribute.'); } </script> <button type="button" onclick="myFn()">Click me</button> |
Output
Click the above button to get an alert message using onclick attribute.
When you click the button given above, you will get an alert message placed inside the declared function.
You May Also Like to Read
- How to Change the Background Transparency of the Div Element.
- Center Align the Div Element Horizontally Using CSS.
- jQuery Remove Anchor Tag Link from Div on Button Click.
- How to Show/Hide Image on Anchor Link Hover Using jQuery and CSS.
- how to Define CSS for Internet Explorer and add IE-only stylesheet