javascript onclick

In this tutorial, we will learn about onclick javascript event. JavaScript is a programming language that can be used to add interactivity to websites. The onClick event is one of the most commonly used events in JavaScript. It occurs when an element is clicked on.

For example, say you have a button on your website. When a user clicks that button, you can use the onClick event to do something. Maybe you want to display a message or redirect the user to another page. Whatever the case may be, the onClick event makes it possible. 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 websites by adding some functionality such as JavaScript button clicks 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.

How to use an onclick event?

First, you must select the element to which you want to add the onClick event. For our javascript button onclick example, we would use the <button> element.

Next, add an attribute to your element. This attribute is called onClick. This attribute’s value is the code you want to run when the element is clicked.

Here’s what our code would look like with the onClick event added :

<button onClick="alert('Hello, world!')">Click me!</button>

When a user clicks on this button, they will see an alert popup that says, “Hello, world!” You can change the message to anything you want.

We are not limited to just displaying a message, either. You can also use the button onClick javascript event to run other javascript code. For example, you could redirect the user to another page using the following code :

<button onClick="window.location='http://www.google.com'">Click me!</button>

This button would redirect the user to www.example.com when clicked. As we can see, the onClick event is a powerful way to add interactivity to your website. There are endless possibilities for what you can do with it!

JavaScript onclick Event Examples

Now that we’ve gone over the basics of the onClick event, let’s look at an example.

In this example, we’re going to create a button that, when clicked, will change the color of the text on the page. To do this, we’ll need to use two things:

The onClick event
The javascript function document.getElementById()

The onClick event will be used to run a function when the button is clicked. The document.getElementById() function will be used to get an element on the page so that we can change its style.

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 by 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 listeners.

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.