How to Set onClick With JavaScript

An event is an action taken by a browser or a user. The JavaScript concept of event handlers or listeners can be utilized to handle these events. A certain event triggers the execution of an event listener. One of these Event Listeners is “onClick.” When a user clicks on an element, an onClick event listener is triggered or executed.

This tutorial will define the procedure on how to set onClick with JavaScript.

How to Set onClick With JavaScript

To set the onclick with JavaScript, there are two different methods, which are:

The first method is to assign a value to the HTML element’s onclick attribute using JavaScript.
The second method is to explicitly add an event listener on the HTML event which checks for the “click” event.

Example 1: Assign a Value to the HTML Element’s onclick Attribute Using JavaScript

In the HTML file, create a heading and a button “Click me” with the id “js” which will trigger the JavaScript function while clicking on it.

<h2>Set onClick property With JavaScript</h2>

<button id="js">Click me</button>

In the following step, the created button will be accessed and an “onclick” attribute will be attached to it. Upon the button click, the specified function will be executed and the “style.backgroundColor” property will change the button color as follows:

document.getElementById("js").onclick = function jsFunc() {

document.getElementById("js").style.backgroundColor = "Purple";

}

The corresponding output will be:

Example 2: Explicitly Add an Event Listener on the HTML Event

Create a button “Click here!” and assigns an id “event” to it that will trigger the addEventListener() method on the “click” event:

<button id="event">Click here!</<strong>button</strong>>

Fetch the button using its id and then attach an “addEventListener()” method by passing a “click” event and a function “eventFunc” where the background color of the button will be changed:

document.getElementById("event").addEventListener("click", eventFunc);

function eventFunc() {

document.getElementById("event").style.backgroundColor = "Green";

}

Output

Example 3: Using All onClick Methods at Once

In this example, the working of all the methods will be displayed at once. First is the default way of adding the onclick attribute within the HTML tag itself. After that, the two methods of setting the onclick attribute with the help of JavaScript have been demonstrated as well.

In the following example, create three buttons and see the functionality of the onclick attribute.

The first button “Click” will call the “htmlFunc()” on the click event.
The button “Click me” will be accessed with its assigned id “js” and then assign a value to the button’s onclick attribute using JavaScript.
The button “Click here!” will be accessed using the id “event” and then attach an “addEventListener()” method with it:

<button id="html" onclick="htmlFunc()">Click</button><br><br>

<button id="js">Click me</button><br><br>

<button id="event">Click here!</button>

The below function will trigger the “onclick” event of the button “Click”:

function htmlFunc() {

alert("The button clicked by HTML onClick event");

}

On clicking the “Click Me” button, the following function will trigger where a warning message will be displayed.

document.getElementById("js").onclick = function jsFunc() {

alert("The button clicked by JavaScript onClick function");

}

The given function will trigger the button “Click here!”:

document.getElementById("event").addEventListener("click", eventFunc);

function eventFunc() {

alert("The button clicked by JavaScript onClick with EventListener Method");

}

The output will display alert messages on each button click:

Conclusion

To set the onclick with JavaScript, there are two different approaches, the first is to assign a value to the HTML element’s onclick attribute using JavaScript and the second approach is to explicitly add an event listener on the HTML event which checks for the “click” event. This tutorial has defined the methods to set onClick with JavaScript along with examples.

How to Set onClick With JavaScript