javascript onclick

JavaScript onclick Event Tutorial

JavaScript onclick event executes the javascript when an element is clicked.

The following code snippets demonstrate the proper syntax of applying the JavaScript button & paragraph onclick event. You should specify the object you want to affect and indicate the onclick function in JavaScript you wish to execute.

The JavaScript onclick event is one of the most frequently utilized event types. It is a common practice to enhance the websites by adding some functionality such as JavaScript button click or other elements.

The JavaScript onclick function is designed to execute code when users interact with the HTML elements. The onclick JavaScript can be applied to any HTML element.

JavaScript onclick Event Examples

Example 1: When you click on the button element then the message will be print.

<html>
<head>
<title>Developer Helps | Javascript OnClick Event</title>
</head>
<body>
<h2>Javascript OnClick Event</h2>
<button onclick="myfun()">Click</button><br><br>
<p id="onclick-event"></p>

<script>
function myfun() 
{
  document.getElementById("onclick-event").innerHTML = "Developer Helps!";
}
</script>

</body>
</html>

Output : (After Click)

Javascript OnClick Event

Click

Developer Helps!

Example 2 : When you click on the text then font style will change.

<html>
<head>
<title>Developer Helps | Javascript OnClick Event</title>
</head>
<body>
<h2>Javascript OnClick Event</h2>
<p id="onclick-event" onclick="myfun()">Click me for change the font style</p>

<script>
function myfun() 
{
  document.getElementById("onclick-event").style.fontStyle = "Italic";
}
</script>

</body>
</html>

Output : (After Click)

Javascript OnClick Event

Click me for change the font style

Example 3 : When you click on the button element then display the date and time.

<html>
<head>
<title>Developer Helps | Javascript OnClick Event</title>
</head>
<body>
<h2>Javascript OnClick Event</h2>
<button onclick="myfun()">What is the date?</button>
<p id="onclick-event"></p>

<script>
function myfun() 
{
  document.getElementById("onclick-event").innerHTML = Date();
}
</script>

</body>
</html>

Output : (After Click)

Javascript OnClick Event

What is the date?

Sun Oct 13 2019 17:41:15 GMT+0530 (India Standard Time)
  • The onclick JavaScript event occurs when the user clicks on an element.
  • It runs a specified line of code when you click an HTML object that has the onclick attribute.
  • The JavaScript onclick functions can be triggered by object.onclick or object.addEventListener.
  • The addEventListener method is not supported by earlier versions of Internet Explorer (8 and below).

Note

It’s important to note that using onclick we can add just one listener function. If you want to add more, just use addEventListener(), which is the preferred way for adding events listener.

In the above example, when a user clicks on the paragraph element in the HTML, they will see the change in text font style showing onclick Event triggered.

Thanks for the reading post. I hope you like and understand the post. If you have any doubts regarding this post please comment below.

More Related Post

Leave a comment

Your email address will not be published. Required fields are marked *