JavaScript onclick Event

The onclick event in JavaScript is triggered when a user clicks on an HTML element. It is commonly used to execute a function or trigger specific actions in response to user interaction.

Now, we see the syntax of using the onclick event in HTML and in javascript (without addEventListener() method or by using the addEventListener() method).

In HTML


<element onclick = "fun()"  ">

In JavaScript


object.onclick = function() { myScript };

Key Features of dblclick Event:

Example1 - Using onclick attribute in HTML

In this example, we are using the HTML onclick attribute and assigning a JavaScript's function to it. When the user clicks the given button, the corresponding function will get executed, and an alert dialog box will be displayed on the screen.

Example 1


 
<!DOCTYPE html>  
<html>  
<head>  
<script>  
function fun() {  
    alert("Welcome to the javaTpoint.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

After clicking the given button, the output will be -

Output

Example - Using JavaScript

In this example, we are using JavaScript's onclick event. Here we are using the onclick event with the paragraph element. When the user clicks on the paragraph element, the corresponding function will get executed, and the text of the paragraph gets changed. On clicking the

element, the background color, size, border, and color of the text will also get change.

Example 2


<!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 javaTpoint.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

After clicking the text Click me, the output will be -

Output

Example3 - Using addEventListener() method

In this example, we are using JavaScript's addEventListener() method to attach a click event to the paragraph element. When the user clicks the paragraph element, the text of the paragraph gets changed. On clicking the paragraph, the background color and font-size of elements will also change.


<!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>  
document.getElementById("para").onclick = function() {  
    fun();  
};  
function fun() {  
    document.getElementById("para").innerHTML = "Welcome to the javaTpoint.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";   
}  
</script>  
</body>  
</html>

Output

On clicking the text Click me, the output will be -

Output