Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to call a JavaScript function on a click event?
To call a function on click event in JavaScript, you can use either the addEventListener method or the onclick event attribute. The addEventListener method is a general way to attach an event handler to a DOM element, and it allows you to specify the event and the callback function to be called when the event occurs.
The onclick attribute is a specific event attribute that allows you to specify a JavaScript function to be called when the element is clicked. Both methods allow you to specify a function to be called when the element is clicked, but the addEventListener method is more flexible and can be used with any type of event, while the onclick attribute is specific to the click event.
To use the addEventListener method, you need to grab the element using the DOM API and then call the addEventListener method on it, passing in the event name and the callback function as arguments.
To use the onclick attribute, you can simply specify the function to be called as the value of the attribute in the HTML element.
Adding click event using the addEventListener() method
The addEventListener() method is used to attach an event handler to any DOM element. The syntax of this method is the following.
Syntax
element.addEventListener( event, function, capture )
Parameters value
Event − The name of the event which you want to apply on the element e.g. click, mouseover, submit, etc.
Function − The callback function which will be fired after the event occurred.
Capture − Whether the event should be executed in the capturing phase. This checks and displays a boolean value; true or false.
Return value − NONE
Steps
The followings are the steps to use the addEventListener method to attach a click event to a button −
STEP 1 − In the HTML body, create a button element and a span element to display the counter value.
STEP 2 − In the script, get the button and span elements using their IDs.
STEP 3 − Use the element.addEventListener method to attach the "click" event to the button element.
STEP 4 − In the callback function for the event listener, increase the counter value by 1.
STEP 5 − Use the parseInt function to convert the counter value (string format) into an integer.
STEP 6 − Assign the new counter value to the span element.
STEP 7 − Open the HTML file in a web browser and click on the button to see the counter value increase.
Example
In this example, we are creating a counter which has a button and after every button click, we are increasing the counter value. To listen to the event we use the element.addEventListener method.
<html>
<body>
<h2> Using the element.addEventListener() method </h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn">Click me</button>
<p><b>Counter: </b> <span id="counter">1</span></p>
</body>
<script>
let btn = document.getElementById("btn")
let counter = document.getElementById("counter")
// Apply the addEventListener method
btn.addEventListener("click", myFunc)
// Defining the myFunc function
function myFunc() {
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
Using the event listener attributes
Browsers allow us to fire an event from the HTML itself. HTML elements have some event attributes e.g., onClick, onMouseOver, onSubmit, etc. To perform any action after these events are fired, we assign some JavaScript code to it or call a JavaScript function.
Example
In this example, we are creating a counter which has a button and after every button click, we are increasing the counter value. To listen to the event we use the onclick attribute.
<html>
<body>
<h2> Using the onclick event attribute</h2>
<p>Click on the button to increase the counter value by one </p>
<button id="btn" onclick="increseCounter()">Click me</button>
<p> <b>Counter: </b> <span id="counter">0</span> </p>
</body>
<script>
function increseCounter() {
// Get the button element
let btn = document.getElementById("btn")
// Get the counter element
let counter = document.getElementById("counter")
// Increase the existing value by 1
// Use the parseInt method to convert the existing
// value (which is in string format) into integer
counter.innerText = parseInt(counter.innerText) + 1
}
</script>
</html>
In this tutorial, we learned how to call a function on click event in JavaScript. There are two ways to add click event to any element, the first is using the addEventListener method and another is using the onclick event attribute.
15K+ Views
