The on-click events in HTML are functional on various HTML elements and input tags, allowing users to interact by clicking on elements like input tags, buttons, and other HTML components to trigger a specific function. The function can be implemented using either HTML or JavaScript code. For complex scripts associated with on-click events, JavaScript is recommended, while simpler scripts can be embedded directly within the HTML tag.
Syntax
The syntax below is employed for HTML onclick events in HTML elements or tags.
<element onclick = "script code">
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
Below are examples demonstrating the use of the HTML onclick function with basic script operations.
Example 1
The provided instances demonstrate the handling of a click event within an HTML element using a simple code snippet. It is possible to utilize a button to trigger the script functionality.
<!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 demonstrates the functionality of the button's on-click event.
Example 2
The script code in HTML tags triggers an onclick event through the provided examples. Utilizing the input tag with a submit type facilitates the execution of the script.
<!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 demonstrates the functionality of the onclick event on an input element with a type of submit.
Example 3
Below are instances of triggering an onclick event within an HTML input element using script code. The script operation can be applied using the input tag with a type of text.
<!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 result demonstrates the behavior of the onclick event on an input field of type text.
Example 4
Below are instances demonstrating the execution of an onclick event within an HTML input tag using script code. The script operation can be performed by utilizing the input tag with a text type.
<!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 displays how the onclick event functions on input elements.
Example 5
The provided instances function on the click event within the HTML tag through a JavaScript function. The script operation can be carried out using the input tag with submit or button type. The onclick event can be implemented using JavaScript code.
<!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 result displays the onclick event associated with input tags using JavaScript code.
Conclusion
The onclick feature in HTML serves as a valuable tool for both users and developers in verifying and communicating form guidelines. By utilizing the onclick event attribute in HTML, it is possible to modify the styles, functionality, and JavaScript function associated with a particular element.