You can call a JavaScript function when a button is clicked in HTML by using the onclick attribute of the button element. There are four different approaches to calling a JavaScript function on a button click in HTML:
| Approach | Event | Element Type | Event Handler | Syntax |
|---|---|---|---|---|
| onclick event | onclick | Button | Inline attribute | <button onclick="myFunction()">Click me</button> |
| ondblclick event | ondblclick | Button | Inline attribute | <button ondblclick="myFunction()">Double-click me</button> |
| onclick event of an input button | onclick | Input type=”button” | Inline attribute | <input type="button" value="Click me" onclick="myFunction()"> |
| jQuery | click | Button or input type=”button” | Event binding | <button id="myButton">Click me</button><br>$('#myButton').click(myFunction);<br><input type="button" value="Click me" id="myInputButton"><br>$('#myInputButton').click(myFunction); |
Note: in jQuery, you can use the click() method with either a button element or an input element of type button. Also, the event handler syntax is different in jQuery because jQuery’s event binding syntax instead of an inline attribute.
Call JavaScript function on button click in HTML example
Simple example code
1. Using the onclick event in JavaScript
Here’s an example HTML code for a button element that calls a JavaScript function named myFunction() when clicked:
<button onclick="myFunction()">Click me</button>
In this example, the onclick attribute is set to the value myFunction(), which is the name of the JavaScript function that should be called when the button is clicked.
You can replace myFunction() with the name of your own JavaScript function that you want to call on button click. Make sure that the function is defined and declared before it is called.
For example, here’s the JavaScript code for a simple function that displays an alert message when called:
function myFunction() {
alert("Button clicked!");
}
You can include this code in a <script> tag in the head or body of your HTML document, or in an external JavaScript file that is linked to your HTML document using the <script> tag.
<!DOCTYPE html>
<html>
<head>
<title>Button Click Example</title>
<script>
function myFunction() {
alert('Button clicked!');
}
</script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
2. Using the ondblclick event in JavaScript
This approach involves creating a button element with an ondblclick attribute that specifies the name of the JavaScript function to be called.
<!DOCTYPE html>
<html>
<head>
<title>Button Double-Click Example</title>
<script>
function myFunction() {
alert('Button double-clicked!');
}
</script>
</head>
<body>
<button ondblclick="myFunction()">Double-click me</button>
</body>
</html>
3. Using the onclick event of an input button
This approach involves creating an input element of type button with an onclick attribute that specifies the name of the JavaScript function to be called.
<!DOCTYPE html>
<html>
<head>
<title>Input Button Click Example</title>
<script>
function myFunction() {
alert('Input button clicked!');
}
</script>
</head>
<body>
<input type="button" value="Click me" onclick="myFunction()">
</body>
</html>
4. Using jQuery
Use the click() method to bind a click event handler to a button or an input element of type button.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Button Click Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#myButton').click(function(){
myFunction();
});
});
function myFunction(){
alert("Button clicked!");
}
</script>
</head>
<body>
<button id="myButton">Click me</button>
</body>
</html>
Output:
The onclick property is an easy and effective way to attach JavaScript functions to HTML buttons. It allows you to define a function to be executed when the button is clicked, without the need for any external libraries or complex code.
Comment if you have any doubts or suggestions on this JS HTML code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version