WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Call Multiple JavaScript Functions in onClick Event

Topic: JavaScript / jQueryPrev|Next

Answer: Use the addEventListener() Method

If you want to call or execute multiple functions in a single click event of a button, you can use the JavaScript addEventListener() method, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Call Multiple JavaScript Functions on Click of a Button</title>
  • </head> 
  • <body>
  •     <button type="button" id="myBtn">Click Me</button>
  •      
  •     <script>
  •     // Defining custom functions
  •     function sayHello(){
  •         alert("Hello World! sayHello() function executed successfully!");
  •     }
  •      
  •     function sayHi(){
  •         alert("Hi There! sayHi() function executed successfully!");
  •     }
  •      
  •     // Selecting button element
  •     var btn = document.getElementById("myBtn");
  •      
  •     // Assigning event listeners to the button
  •     btn.addEventListener("click", sayHello);
  •     btn.addEventListener("click", sayHi);
  •     </script>
  • </body>
  • </html>

See the tutorial on JavaScript event listeners to learn more attaching multiple event handlers.

Alternatively, you can also call more than one JavaScript function in one onclick event, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Execute Two JavaScript Function in One onClick Event</title>
  • </head> 
  • <body>
  •     <script>
  •     // Defining custom functions
  •     function sayHello(){
  •         alert("Hello World! sayHello() function executed successfully!");
  •     }
  •      
  •     function sayHi(){
  •         alert("Hi There! sayHi() function executed successfully!");
  •     }
  •     </script>
  •     
  •     <button type="button" onclick="sayHello();sayHi();">Click Me</button>
  • </body>
  • </html>

The second method however looks simple and easy, but you should avoid placing JavaScript code directly inside HTML element. The first method is better and more preferable.


Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.