HTML Onclick Events

The HTML on-click events work on HTML elements and input tags. We can click on the input tag, button, and other HTML elements to operate the function. The function's script can be in either HTML or JavaScript code. If the script of the on-click events is complicated, use JavaScript; otherwise, use it in the HTML tag.

Syntax

The following syntax is used for HTML onclick events in HTML elements or tags.

Description

The event can use a script code or basic function operated in an HTML tag.
The event can use the function name and the function in JavaScript.
The onclick event attribute is supported by all HTML tags except <br>, <head>, <html>, <base>, <bdo>, <iframe>, <script>, <style>, <meta>, <param>, and <title>.

Examples

The following examples show the html onclick function with the simple script operation.

Example 1

The following examples operate on click event in html tag with the basic code. We can use the button for the script operation.

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: orange;
}
#b2{
background-color: aqua;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
Html onclick event helps to operate the script function.
<br>
We can use Button for the onclick event.
</p>
<p id = "times_today"></p>
<br>
<!-- Button used for the onclick function -->
<button id = "b1" onclick = "getElementById('times_today').innerHTML= Date();"> Click to Get Time </button>
<button id = "b2" onclick = "alert('Hello Students, Welcome to Html tutorial!!');"> Click to Get Alert Output </button>
</body>
</html>

Output:

The output shows the on-click event on the button and its operation.

Example 2

The following examples operate an onclick event in html tag with the script code. We can use the input tag with the submit type for the script operation.

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: yellow;
}
#b2{
background-color: skyblue;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use the input tag with the submit type for the onclick event.
</p>
<p id = "times_today"></p>
<br>
<!-- Submit type in input tag used for the onclick function -->
<input id = "b2"  type = "submit" value = "Click Here" onclick = "getElementById('times_today').innerHTML= 'Hello Student';">
<input type = "submit" id = "b1" value = " Click to Get Alert Output " onclick = "alert('Hello Students, Welcome to onclick event with submit type in the tag!!');">
</body>
</html>

Output:

The output shows the onclick event on the input submit type and its operation.

Example 3

The following examples operate an onclick event in html input tag with the script code. We can use the input tag with text type for the script operation.

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: #edeaea;
}
#b2{
background-color: #e4f7f2;
}
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use an input tag with text type for the onclick event.
</p>
<p id = "times_today" style = "color:red;"></p>
<br>
<!-- text type in input tag used for the onclick function -->
<input type = "text" id = "b1" onclick = "alert('Hello Students, Learn Html Event Attribute!!');" placeholder = "Write Something...">
<input id = "b2" type = "text" onclick = "getElementById('times_today').innerHTML= 'Please Write Your Name';" placeholder = "Write Something...">
</body>
</html>

Output:

The output shows the onclick event on the input text type and its operation.

Example 4

The following examples operate an onclick event in html input tag with the script code. We can use the input tag with text type for the script operation.

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: #edeaea;
}
#b2{
background-color: #e4f7f2;
}
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p class = "class2">
We can use an input tag with a radio button and a checkbox for onclick events.
</p>
<!-- Checkbox type in input tag used for the onclick function -->
<b> Hobbies : </b>
<input type = "checkbox" id = "b1" onclick = "alert('Hello Student, You Select Reading!!');" placeholder = "Write Something...">
<lable> Read </lable>
<input type = "checkbox" id = "b1" onclick = "alert('You Select Dancing!!');" placeholder = "Write Something...">
<lable> Dance </lable>
<input type = "checkbox" id = "b1" onclick = "alert('You Select Playing!!');" placeholder = "Write Something...">
<lable> Play </lable>
<br>
<p id = "times_today" style = "color:red;"></p>
<!?Radio button type in input tag used for the onclick function -->

<b> Gender : </b>
<input id = "b2" type = "radio" onclick = "getElementById('times_today').innerHTML= 'You Select Male';" placeholder = "Write Something...">
<lable> Male </lable>
<input id = "b2" type = "radio" onclick = "getElementById('times_today').innerHTML= 'You Select Female';" placeholder = "Write Something...">
<lable> Female </lable>
</body>
</html>

Output:

The output shows the onclick event on input tags and its operation.

Example 5

The following examples operate on the click event in the HTML tag with the JavaScript function. We can use the input tag with submit and button type for the script operation. We can use JavaScript code for the onclick event.

<!DOCTYPE html>
<html>
<head>
<title> Html onclick event </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
#b1{
background-color: orange;
}
#b2{
background-color: skyblue;
</style>
</head>
<body>
<h3 class = "class1">
Html onclick event
</h3>
<p id = "class2">
We can use an input tag with submit and button types for the onclick event.
</p>
<p id = "times_today"> Learn the HTML onclick Event</p>
<br>
<!-- Submit type in input tag used for the onclick function -->
<input id = "b1"  type = "submit" value = "Click Here to Add Style" onclick = "click1();">
<!-- button type in input tag used for the onclick function -->
<input type = "button" id = "b2" value = " Click Button" onclick = "click2();">
<script>
function click1(){
document.getElementById("times_today").style.color = "red";
document.getElementById("times_today").style.fontSize = "20px";
document.getElementById("times_today").style.border = "2px solid black";
}
function click2(){
document.getElementById("times_today").style.display = "none";
document.getElementById("class2").style.color = "blue";
document.getElementById("class2").style.fontSize = "18px";
}
</script>
</body>
</html>

Output:

The output shows the onclick event on input tags with JavaScript code.

Conclusion

The onclick function in HTML is useful for users and developers to validate and notify guidelines of the form. We can change the styles, operation, and javascript function using the onclick event attribute in the html.

Next TopicHTML Photo

← prev next →