onclick is an event attribute that defines a handler script that will be executed when the user clicks on an HTML element.
Definition and Usage
➔ It is only activated when the mouse is clicked on the element.
➔ The onclick attribute can be used on almost all visible HTML elements.
➔ It is typically used to interact with the user by triggering actions such as displaying alerts, changing element values or styling elements, navigating pages, submitting form data, or calculating complex logic.
Syntax
//In HTML
<input type="text" onclick="myFunction()">
// In Javascript object
object.onclick =function() {myHandler()};
// In Javascript object
object.onclick = (event) => {
//alert("mouse clicked"); //or
myFunction();
};
// Using EventListener function run on click
document.querySelector("#id").addEventListener("click", myFunction);
// Using EventListener function run at loading time only
document.querySelector("#id").addEventListener("click", myFunction());
// Using EventListener
object.addEventListener("click", (event) => {
myFunction();
});
//Or
document.querySelector("#id").addEventListener("click",()=>{
//alert("mouse clicked");
myFunction();
});
function myFunction(){
alert("mouse click");
}
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onclick | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onclick Attribute Example</title>
<meta charset="utf-8" />
<style>
input[type="button"] {
width: 150px;
height: 50px;
background-color: #2e3e4e;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="button"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"],
input[type="email"] {
width: 230px;
height: 30px;
background-color: #efffff;
font-size: 14pt;
color: #000;
border-radius: 5px;
margin: 5px;
}
input[type="text"]:hover,
input[type="email"]:hover {
background-color: #fff;
}
</style>
</head>
<body>
<h2>HTML onclick Attribute Example</h2>
<p>This is for example purposes only, this example will not allow you to submit values.</p>
<p id="mypara" onclick="myFunction()">Click on this paragraph to see the change.</p>
<form action="#">
Name: <input type="text" name="name" id="name"><br>
Email: <input type="email" name="email" id="email"><br>
<input type="button" value="Submit" id="button">
</form>
<script>
function myFunction() {
document.querySelector("#name").style.backgroundColor = "#d5d5d5";
document.querySelector("#email").style.backgroundColor = "skyblue";
document.querySelector("#button").value = "Click me";
document.querySelector("#mypara").innerHTML = "A function is triggered when the onclick event occurs on an element.";
}
function myFunction2() {
document.querySelector("#name").style.backgroundColor = "skyblue";
document.querySelector("#email").style.backgroundColor = "#d5d5d5";
document.querySelector("#button").value = "Submit";
document.querySelector("#mypara").innerHTML = "<h2>Click on this paragraph to see the change.</h2>";
}
document.querySelector("#button").onclick = function () { myFunction2() };
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.