Article Categories

Selected Reading

How do I run two or more functions when using 'onclick' JavaScript?

Javascript Web Development Object Oriented Programming

When handling click events in JavaScript, you often need to execute multiple functions. There are several ways to run two or more functions when using the onclick event.

Method 1: Using a Wrapper Function

Create a single function that calls multiple functions inside it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Functions onClick</title>
</head>
<body>
    <button type="button" onclick="callTwoFunctions()">Call Functions</button>
    
    <script>
        function callTwoFunctions() {
            fun1();
            fun2();
        }
        
        function fun1() {
            console.log("Function 1 executed");
        }
        
        function fun2() {
            console.log("Function 2 executed");
        }
    </script>
</body>
</html>

Function 1 executed
Function 2 executed

Method 2: Inline Function Calls

Call multiple functions directly in the onclick attribute, separated by semicolons:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Multiple Functions</title>
</head>
<body>
    <button type="button" onclick="showAlert(); logMessage();">Click Me</button>
    
    <script>
        function showAlert() {
            alert("Alert function called!");
        }
        
        function logMessage() {
            console.log("Log function called");
        }
    </script>
</body>
</html>

Method 3: Using addEventListener (Recommended)

Modern JavaScript prefers using addEventListener for better code organization:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Method</title>
</head>
<body>
    <button id="myButton">Click with Event Listener</button>
    
    <script>
        function firstFunction() {
            console.log("First function executed");
        }
        
        function secondFunction() {
            console.log("Second function executed");
        }
        
        document.getElementById('myButton').addEventListener('click', function() {
            firstFunction();
            secondFunction();
        });
    </script>
</body>
</html>

First function executed
Second function executed

Comparison

Method	Pros	Cons
Wrapper Function	Clean HTML, reusable	Extra function needed
Inline Calls	Direct, simple	HTML gets cluttered
addEventListener	Modern, flexible, separation of concerns	More code required

Key Points

Use semicolons to separate multiple function calls in onclick
Wrapper functions keep HTML clean and functions reusable
addEventListener is the modern approach for complex applications
Functions execute in the order they're called

Conclusion

The wrapper function method provides the best balance of clean HTML and maintainable code. For modern web development, consider using addEventListener for better code organization and flexibility.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

642 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next