This jQuery tutorial helps you define a function and invoke it when a button is clicked. We will explore various ways to define jQuery functions and demonstrate their usage through examples.
There are very common tasks in any web application Like defining functions that execute when a user interacts with a web page, such as clicking a button.
Prerequisites
Please Make sure you have jQuery integrated into your web project. You can do this by adding the jQuery library through a CDN (Content Delivery Network) or by downloading it and hosting it locally.
Create a Function and Trigger It onClick() of the Button
You can use either the onclick attribute or the jQuery click event with the click() function to invoke a function when a click event occurs. Create a directory named ‘jquery-example’ and within this directory, generate a fresh file named ‘index.html’.
Import jQuery
Include jQuery in the head section of your file.
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- Your web page content here --> </body> </html>
Defining a Function with jQuery
Let’s create a setTitle() method into the index.html file.
<h1 id="title"></h1>
<script>
// Define a function
function setTitle() {
$('#title').text('js-tutorials.com!');
}
</script>
in the above code have defined setTitle() function, it uses jQuery to select an HTML element with the ID ‘title’ and changes its text to “js-tutorials.com!” when called.
Call jQuery Method onclick of Button
We’ll call the above method inside the $(document).ready() function. This method helps to execute code only after the HTML document is fully loaded.
$(document).ready(function() {
// Attach a click event handler to a button with the ID 'setName'
$('#btnTitle').click(setTitle);
});
<button id="btnTitle">Change Title</button>
In the above code, we have attached a click event with a button, which triggers the setTitle function.
Full code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<script>
// Define a function
function setTitle() {
$('#title').text('js-tutorials.com!');
}
$(document).ready(function() {
// Attach a click event handler to a button with the ID 'setName'
$('#btnTitle').click(setTitle);
});
</script>
<button id="btnTitle">Change Title</button>
</body>
</html>
Passing Parameters to a Click Event Function
Sometimes, we need to parameters to the function triggered by a click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title"></h1>
<script>
// Define a function
function setTitle(title) {
$('#title').text(title);
}
$(document).ready(function() {
$('#btnTitle').click(function() {
setTitle('js-tutorials.com!');
});
});
</script>
<button id="btnTitle">Change Title</button>
</body>
</html>
in the above code, we have defined the anonymous function inside the click() event handler, that will invoke the method when the user clicks the button, this will call the setTitle() method and change the text.
Conclusion
We have learned about jQuery method creation and method invoking on onclick event. Also, attached click event handlers and pass parameters to functions on the click of the method.
