javascript onclick

JavaScript onclick Event

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

JavaScript onclick Event Examples

Example 1 : When you click on the button element then 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)

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

More Related Post

Leave a comment

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

0 0 0
FOLLOW ON