jQuery onclick Call Function Example

jQuery onclick Call Function Example

In this tutorial, we will learn how to use jQuery’s onclick event to call a function and pass parameters, including the element’s ID. This can be very useful when you want to trigger specific actions for different elements on a webpage.

jQuery onclick Call Function with Parameters, id, data attribute value Example

Steps to onclick call function with parameters, id, data, attribute etc in jquery:

  • Step 1: Setting up the HTML structure
  • Step 2: Including jQuery in your project
  • Step 3: Creating the JavaScript function
  • Step 4: Using the onclick event to call the function with parameters

Step 1: Setting up the HTML structure

First of all, we need to create a basic HTML structure with elements that we can interact with. In this example, we’ll create buttons with unique IDs and a container to display the result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery onclick Function Example</title>
</head>
<body>
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <div id="result"></div>
    
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include your custom JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

Step 2: Including jQuery in your project

Now, we need to include jqueyr in project. So,We’re using a Content Delivery Network (CDN) to include jQuery in our project. You can also download jQuery and host it locally. Make sure the jQuery script tag is placed before your custom JavaScript file.

Step 3: Creating the JavaScript function

Then, we need to create a JavaScript file called script.js and define the function that will be called when the buttons are clicked. This function will take the element’s ID as a parameter and display a message in the result container.

// script.js

// Function to handle button clicks
function handleButtonClick(buttonId) {
    // Generate a message based on the button's ID
    var message = "Button with ID '" + buttonId + "' was clicked!";
    
    // Display the message in the result container
    $("#result").text(message);
}

Step 4: Using the onclick event to call the function with parameters

In the last steps, we will use the jQuery onclick event to call the handleButtonClick function when a button is clicked. We will also pass the button’s ID as a parameter.

// script.js

$(document).ready(function() {
    // Attach click event handlers to the buttons
    $("#btn1").click(function() {
        handleButtonClick("btn1");
    });
    
    $("#btn2").click(function() {
        handleButtonClick("btn2");
    });
});

In this code, we’re using the .click() method to attach a click event handler to each button. When a button is clicked, the corresponding function (handleButtonClick) is called, passing the button’s ID as a parameter.

Conclusion

Congratulations! You’ve learned how to use jQuery’s onclick event to call a function with parameters, including the element’s ID.

Recommended Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *