How to Call JavaScript Function on Button Click in HTML? (5 Simple Methods)

Do you want to know How to Call JavaScript Function on a Button click in HTML?

In your HTML web page, you can easily add a button element and trigger a JavaScript function when it is clicked using just a few lines of code.

If you’re new to coding and unsure how to call a JavaScript function on a button click, here are four simple methods to follow.

7 Practical Use Cases for Calling a JavaScript Function on Button Click in HTML

There are several use cases for calling a JavaScript function on a button click in HTML, such as adding interactive elements and enabling dynamic functionality on a webpage. Some common examples include:

Form Submission Handling – Validate user input, prevent default submission, or process form data before sending it to the server.
DOM Manipulation – Modify elements, change styles, hide/show elements, or update content dynamically.
Event Handling – Perform specific actions like opening modals, toggling menus, or triggering animations.
Fetching Data – Make API calls using fetch() or XMLHttpRequest and display the data dynamically.
Navigation Control – Redirect users to different pages or change URL parameters without reloading.
Performing Calculations – Process and display calculations (e.g., total price, BMI calculator, currency converter).
Game and Interactive Elements – Control elements in web-based games, start/stop timers, or handle user inputs.

Method 1: Using the onclick Attribute in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Button Click Example</title>
    <script>
        function myFunction() {
            alert("Button clicked!");
        }
    </script>
</head>
<body>
    <button onclick="myFunction()">Click Me</button>
</body>
</html>

The onclick attribute is one of the easiest ways to call a JavaScript function when a button is clicked.

To make this work, first, create your function in the JavaScript section. In this example, I’ve created a simple function called myFunction.

Then, I call the alert method inside it with the text "Button clicked!".

Now, I will add the onclick attribute to the button element and assign the function to it.

Now, when the user clicks the button, an alert box will appear with the text “Button clicked!”.

Also See: How to Take user Input in JavaScript without Prompt? (4 Simple Methods)

Method 2: Using addEventListener in JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

If you prefer not to use the onclick attribute but still want to achieve the same functionality, you can use the addEventListener method instead.

First, add an id attribute to the HTML button element.

Then, in the JavaScript section, select the element by its id using the getElementById method.

Now, attach the addEventListener method, set the event type to "click", and define the function that should execute when the user clicks the button element.

Method 3: Using onmousedown and onmouseup Events

<button onmousedown="mousedownFunction()" onmouseup="mouseupFunction()">Click Me</button>

<script>
    function mousedownFunction() {
        console.log("Mouse button pressed!");
    }
    function mouseupFunction() {
        console.log("Mouse button released!");
    }
</script>

If you want to achieve the same functionality without using Method 1 or Method 2, here is another approach to doing it.

First, add the onmousedown and onmouseup attributes to the button element in your HTML file.

Now, in the JavaScript section, create two functions: one for when the mouse button is pressed down and another for when the mouse button is released.

Now, assign the respective function names to the onmousedown and onmouseup attributes accordingly.

Now, when the user clicks the button, the function will execute according to how you have written the code.

Method 4: Using onclick with querySelector

<button class="btn">Click Me</button>

<script>
    document.querySelector(".btn").onclick = () => {
        console.log("Button clicked!");
    };
</script>

If you’re familiar with the querySelector method, you can use this approach. In the fourth method, I demonstrated a simple way to call a function when a button is clicked.

First, add a class or a id to your button element.

Then, select the button using the querySelector method, attach the onclick event, and write the function you want to execute when the button is clicked.

Method 5: Using jQuery (click Method)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="myButton">Click Me</button>

<script>
    $("#myButton").click(function() {
        alert("Button clicked!");
    });
</script>

If you want to write less code in your project, jQuery can help, as it allows you to achieve functionality with fewer lines of JavaScript.

Before writing any jQuery code, ensure you include the jQuery CDN in the <head> section of your HTML file.

If you’re unfamiliar with jQuery, don’t worry! It’s one of the easiest JavaScript libraries to learn.

To call a JavaScript function when a user clicks a button, you can use the following jQuery methods:

$(“#myButton”) – Selects an element with the ID “myButton”
.click() – This method in jQuery is used to attach a click event to elements, allowing you to execute a function when the element is clicked.

Conclusion

I hope you now understand how to call a JavaScript function on a button click in HTML. If you have a better solution, feel free to mention it in the comments section so I can include it in this blog post.

If you enjoyed this blog post, you might also be interested in:

For more amazing coding-related videos, subscribe to our SingleSyntax YouTube channel!

On this page