Call multiple JavaScript functions in onclick event Last Updated : 12 Sep, 2024 Comments Improve Suggest changes Like Article Like Report Calling multiple JavaScript functions in an onclick event means executing several functions sequentially when a user clicks an element, like a button. This approach allows you to trigger multiple actions or behaviors with a single click, enhancing interactivity and functionality in web applications.Below are the approaches to calling multiple JavaScript functions in onclick event:Table of ContentCalling all functions at onceCalling a Single Function That Calls Other FunctionsApproach 1: Calling all functions at onceThe Calling all functions at once approach involves listing multiple function names in the onclick attribute, separated by semicolons (;). When the element is clicked, each function is executed in the order they are listed, allowing multiple actions in one click.Example 1: This example we Clicking the button calls GFG_Fun_1() and GFG_Fun_2(). GFG_Fun_1() updates the first paragraph, while GFG_Fun_2() updates the second, demonstrating multiple function calls on click. HTML <!DOCTYPE html> <html> <head> <title> Call multiple JavaScript functions in onclick event </title> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <button onclick="GFG_Fun_1(); GFG_Fun_2()"> click here </button> <p id="GFG_DOWN_1"> <p id="GFG_DOWN_2"> </p> <script> let up = document.getElementById('GFG_UP'); up.innerHTML = 'Click on the button to call multiple functions'; let down_1 = document.getElementById('GFG_DOWN_1'); let down_2 = document.getElementById('GFG_DOWN_2'); function GFG_Fun_1() { down_1.innerHTML = 'From function 1'; } function GFG_Fun_2() { down_2.innerHTML = 'From function 2'; } </script> </body> </html> Output:Â Call multiple JavaScript functions in onclick eventApproach 2: Calling a Single Function That Calls Other FunctionsThe Calling a Single Function That Calls Other Functions approach involves invoking one main function in the onclick attribute. This main function then sequentially calls other functions within its body, centralizing the function calls and simplifying event handling for multiple actions.Example 1: This example we Clicking the button triggers GFG_Fun(), which sequentially calls GFG_Fun_1() and GFG_Fun_2(). GFG_Fun_1() updates one paragraph, while GFG_Fun_2() updates another. HTML <!DOCTYPE html> <html> <head> <title> Call multiple JavaScript functions in onclick event </title> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <button onclick="GFG_Fun(); "> click here </button> <p id="GFG_DOWN_1"> <p id="GFG_DOWN_2"> </p> <script> let up = document.getElementById('GFG_UP'); up.innerHTML = 'Click on the button to call multiple functions'; let down_1 = document.getElementById('GFG_DOWN_1'); let down_2 = document.getElementById('GFG_DOWN_2'); function GFG_Fun() { GFG_Fun_1(); GFG_Fun_2(); } function GFG_Fun_1() { down_1.innerHTML = 'From function 1'; } function GFG_Fun_2() { down_2.innerHTML = 'From function 2'; } </script> </body> </html> Output:Â Call multiple JavaScript functions in onclick event Comment More infoAdvertise with us Next Article Call multiple JavaScript functions in onclick event P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Call a JavaScript Function using an onsubmit Event ? HTML has a form element that is used to get the data from the user and send the data to the server. Before the HTML form sends data to the server, it generates an event called "submit". This event can be utilized to execute a JavaScript function that can either validate the form data or notify the u 3 min read How to Call a JavaScript Function from an onmouseout Event ? The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage. Below are the approaches to call a JavaScript function from an onmou 3 min read How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so 2 min read How to Call a JavaScript Function from an onsubmit Event ? The onsubmit event attribute in HTML is triggered when a form is submitted. It is also useful for validating form data or performing actions before any submission and ensures better control and validation of user inputs before data is sent. The below methods can be used to call a JavaScript function 2 min read How to call a JavaScript Function from an onmouseover Event ? The onmouseover event in JavaScript is triggered when the mouse pointer moves onto an element, such as a button, image, or text. We will see how to call JavaScript function from an onmouseover event in various ways, like using the onmouseover Attribute and Using Event Listener. Table of Content Usin 2 min read All about Functions and Scopes in JavaScript In this article, we will cover all the basic concepts of JS functions, callbacks, scopes, closures in-depth which would help you to - understand different types of function declarations.make better use of functions.understand how different scopes and scope chain works in JS.learn about closures and 10 min read Array of functions in JavaScript Given an array containing functions and the task is to access its element in different ways using JavaScript. Approach: Declare an array of functions.The array of functions works with indexes like an array function. Example 1: In this example, the function call is initiated from the element of the a 2 min read JavaScript onclick Event The onclick event generally occurs when the user clicks on an element. It's a fundamental event handler in JavaScript, triggering actions or executing functions in response to user interaction, facilitating dynamic and interactive web functionality.In JavaScript, we can use the onclick function in t 2 min read How to write a function in JavaScript ? JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod 4 min read JavaScript Course Functions in JavaScript Javascript functions are code blocks that are mainly used to perform a particular function. We can execute a function as many times as we want by calling it(invoking it). Function Structure: To create a function, we use function() declaration. // Anonymous function function(){ // function...body } / 4 min read Like