The onclick event typically takes place when a user clicks on a specific element. It enables developers to run a JavaScript function in response to an element being clicked. This particular event can serve various purposes, such as form validation, displaying warning messages, and much more.
Using JavaScript, this event can be dynamically added to any element. It supports all HTML elements except <html> , <head> , <title> , <style> , <script> , <base> , <iframe> , <bdo> , <br> , <meta> , and <param> . It means we cannot apply the onclick event on the given tags.
In HTML, the onclick attribute can be utilized to link a JavaScript function directly. Additionally, for enhanced flexibility, we can employ JavaScript's addEventListener method, which allows us to specify a click event as an argument.
Syntax
At this point, let us examine the syntax for implementing the onclick event in HTML as well as in JavaScript, both when not utilizing the addEventListener method and when employing the addEventListener method.
In HTML
<element onclick = "fun()">
In JavaScript
object.onclick = function() { myScript };
In JavaScript by using the addEventListener method
object.addEventListener("click", myScript);
Let's explore the utilization of the onclick event through various illustrations. In this section, we will examine examples demonstrating the onclick event in both HTML and JavaScript.
Example1 - Using onclick attribute in HTML
In the following illustration, we utilize the onclick attribute in HTML, linking it to a JavaScript function. Upon the user's click on the specified button, the associated function will be triggered, resulting in the appearance of an alert dialog box on the user's screen.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
alert("Welcome to the logic-practice.com");
}
</script>
</head>
<body>
<h3> This is an example of using onclick attribute in HTML. </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>
Output
Upon clicking the specified button, the resulting output will be -
Example2 - Using JavaScript
In this illustration, we are utilizing the onclick event in JavaScript. Specifically, we are applying the onclick event to a paragraph element.
Upon the user clicking the paragraph element, the designated function will be triggered, leading to a modification of the paragraph's text. Furthermore, when the user clicks on the <p> element, alterations will be made to the background color, dimensions, border, and text color as well.
Example
<!DOCTYPE html>
<html>
<head>
<title> onclick event </title>
</head>
<body>
<h3> This is an example of using onclick event. </h3>
<p> Click the following text to see the effect. </p>
<p id = "para">Click me</p>
<script>
document.getElementById("para").onclick = function() {
fun()
};
function fun() {
document.getElementById("para").innerHTML = "Welcome to the logic-practice.com";
document.getElementById("para").style.color = "blue";
document.getElementById("para").style.backgroundColor = "yellow";
document.getElementById("para").style.fontSize = "25px";
document.getElementById("para").style.border = "4px solid red";
}
</script>
</body>
</html>
Output
Upon selecting the text labeled Click me, the result generated will be -
Example3 - Using addEventListener method
In this illustration, we utilize the addEventListener method from JavaScript to bind a click event to the paragraph element. Whenever the user clicks on the paragraph element, the text contained within it is modified.
Upon clicking the paragraph, both the background color and the font size of the elements will be altered as well.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>This is an example of using click event.</h3>
<p>Click the following text to see the effect.</p>
<p id="para">Click me</p>
<script>
// Function to be called on click
function fun() {
document.getElementById("para").innerHTML = "Welcome to the logic-practice.com";
document.getElementsByTagName("body")[0].style.color = "blue";
document.getElementsByTagName("body")[0].style.backgroundColor = "lightgreen";
document.getElementsByTagName("body")[0].style.fontSize = "25px";
document.getElementById("para").style.border = "4px solid red";
}
// Add event listener to the paragraph
document.getElementById("para").addEventListener("click", fun);
</script>
</body>
</html>
Output
Upon clicking the text labeled Click me, the resulting output will be -