How to call a JavaScript function on a click event?

Javascript Web Development Front End Scripts

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.