How to call multiple JavaScript functions in onclick event?

Question

Is there any way to use the onclick html attribute to call more than one JavaScript function?

possible duplicate of [Can I have two JavaScript onclick events in one element?](http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-element) — BuZZ-dEE, Jun 02 '15 at 13:38

score 520 · Accepted Answer · edited Mar 08 '17 at 18:13

520

onclick="doSomething();doSomethingElse();"

But really, you're better off not using onclick at all and attaching the event handler to the DOM node through your Javascript code. This is known as unobtrusive javascript.

edited Mar 08 '17 at 18:13

Dasar

350
3
12

answered Oct 11 '10 at 23:48

brad

31,987
28
102
155

3

Thanks for the reference to unobtrusive JS, I've come across this before, and I should refrain from writing obtrusive JS just because I'm lazy! xD – Qcom Oct 12 '10 at 00:19
9

no probs... I also highly recommend jQuery which will really help you with your unobtrusive goal. You can easily attach event handlers to DOM elements and do much much more all unobtrusively. I've used it for 2 years now and never looked back. – brad Oct 12 '10 at 00:52
4

If one called action in the onclick fails, the whole thing falls like a domino chain and the onclick fails to work. – Fiasco Labs Jan 27 '13 at 19:21
is it a best practice to add 2 functions like what you suggested funct1();funct2() ? this might not always work , no ? – Rami Sarieddine Dec 31 '14 at 08:45
8

This html attribute is actually `onclick=""` not `onClick=""`. It's a very common mistake. – DrewT Feb 25 '15 at 23:09
1

@DrewT it depends if you are using reactjs it is onClick – Shubham Chopra May 28 '19 at 11:12
4

@ShubhamChopra what you are talking about is `jsx` not `html` and this question has not been tagged with `jsx` – DrewT May 28 '19 at 19:49
@DrewT Agreed ! – Shubham Chopra May 29 '19 at 05:51
Hi, any simple example on unobtrusive javascript for "onClick" ? thanks – questionasker Jun 01 '19 at 10:59

score 103 · Answer 2 · answered Oct 11 '10 at 23:48

103

A link with 1 function defined

<a href="#" onclick="someFunc()">Click me To fire some functions</a>

Firing multiple functions from someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}

answered Oct 11 '10 at 23:48

Marko

71,361
28
124
158

7

IMHO, this is the true programmer's approach. – arkon Sep 23 '12 at 13:17
4

This might not work well if you have any arguments being passed to the functions, especially if you generate those arguments from a server-side language. It would be easier to build/maintain the code by appending the functions (with any arguments) within the server-side language rather than testing all possible iterations on both the server and client. – Siphon Sep 17 '14 at 14:02
Nice solution! Also try `onClick={()=>someFun()}` Works for me when I was getting `Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.` – Adarsh Pawar Jun 20 '21 at 09:06

score 55 · Answer 3 · edited Feb 08 '17 at 08:14

55

This is the code required if you're using only JavaScript and not jQuery

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);

edited Feb 08 '17 at 08:14

Nathanael Martin

3
4

answered Dec 11 '15 at 05:49

anandharshan

5,817
4
34
33

score 12 · Answer 4 · edited Jun 20 '17 at 13:14

12

Sure, simply bind multiple listeners to it.

Short cutting with jQuery

$("#id").bind("click", function() {
  alert("Event 1");
});
$(".foo").bind("click", function() {
  alert("Foo class");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>

edited Jun 20 '17 at 13:14

Bhargav Chudasama

6,928
5
21
39

answered Oct 11 '10 at 23:47

Josh K

28,364
20
86
132

score 12 · Answer 5 · edited Jun 06 '16 at 14:01

12

I would use the element.addEventListener method to link it to a function. From that function you can call multiple functions.

The advantage I see in binding an event to a single function and then calling multiple functions is that you can perform some error checking, have some if else statements so that some functions only get called if certain criteria are met.

edited Jun 06 '16 at 14:01

Stefan van den Akker

6,661
7
48
63

answered Oct 11 '10 at 23:57

Girish Dusane

1,120
4
12
19

score 8 · Answer 6 · edited May 20 '20 at 15:54

8

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>

edited May 20 '20 at 15:54

Mihai Chelaru

7,614
14
45
51

answered Mar 22 '19 at 09:50

Hitesh Sahu

41,955
17
205
154

score 6 · Answer 7 · answered Oct 11 '18 at 03:58

var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
  console.log("Method 2");
}
function method1(){
  console.log("Method 1");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>

You can achieve/call one event with one or more methods.

Eduard Florinescu · Answer 8 · 2018-02-12T20:03:00.507

You can add multiple only by code even if you have the second onclick atribute in the html it gets ignored, and click2 triggered never gets printed, you could add one on action the mousedown but that is just an workaround.

So the best to do is add them by code as in:

var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);

<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");'  > Click me</button>

You need to take care as the events can pile up, and if you would add many events you can loose count of the order they are ran.

Remi · Answer 9 · 2018-08-05T11:47:56.303

One addition, for maintainable JavaScript is using a named function.

This is the example of the anonymous function:

var el = document.getElementById('id');

// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });

But imagine you have a couple of them attached to that same element and want to remove one of them. It is not possible to remove a single anonymous function from that event listener.

Instead, you can use named functions:

var el = document.getElementById('id');

// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);

This also keeps your code a lot easier to read and maintain. Especially if your function is larger.

For further information, "tutorialist" Avelx has a nice video I can recommend regarding this subject: https://www.youtube.com/watch?v=7UstS0hsHgI — Remi, Aug 05 '18 at 11:36

score 2 · Answer 10 · answered Apr 29 '22 at 00:22

2

React Functional components

             <Button
                onClick={() => {
                  cancelAppointment();
                  handlerModal();
                }}
             >
                Cancel
             </Button>

answered Apr 29 '22 at 00:22

Ivan K.

748
7
11

score 1 · Answer 11 · answered Aug 08 '21 at 21:44

1

 const callDouble = () =>{
    increaseHandler();
    addToBasket();
}                
<button onClick={callDouble} > Click </button>

It's worked for me, you can call multiple functions in a single function. then call that single function.

answered Aug 08 '21 at 21:44

mubasshir00

307
3
9

score 1 · Answer 12 · answered May 19 '22 at 19:47

Here is another answer that attaches the click event to the DOM node in a .js file. It has a function, callAll, that is used to call each function:

const btn = document.querySelector('.btn');

const callAll = 
  (...fns) =>
  (...args) =>
    fns.forEach(fn => fn?.(...args));

function logHello() {
  console.log('hello');
}

function logBye() {
  console.log('bye');
}


btn.addEventListener('click', 
  callAll(logHello, logBye)
);

<button type="button" class="btn">
  Click me
</button>

score 0 · Answer 13 · answered Feb 19 '17 at 05:19

You can compose all the functions into one and call them.Libraries like Ramdajs has a function to compose multiple functions into one.

<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>

or you can put the composition as a seperate function in js file and call it

const newFunction = R.compose(fn1,fn2,fn3);


<a href="#" onclick="newFunction()">Click me To fire some functions</a>

score 0 · Answer 14 · edited Apr 13 '23 at 11:27

0

<button
  className=' btn btn-primary btn-active-light-primary'
  onClick={() => {
    setcheck(true)
    setroldata([])
  }}
>
  Create New User
</button>

edited Apr 13 '23 at 11:27

Tyler2P

2,324
26
22
31

answered Apr 13 '23 at 06:55

GM Taium Ahmed

77
4

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Apr 13 '23 at 11:26

score -1 · Answer 15 · answered Jun 17 '20 at 14:30

This is alternative of brad anser - you can use comma as follows

onclick="funA(), funB(), ..."

however is better to NOT use this approach - for small projects you can use onclick only in case of one function calling (more: updated unobtrusive javascript).

function funA() {
  console.log('A');
}

function funB(clickedElement) {
  console.log('B: ' + clickedElement.innerText);
}

function funC(cilckEvent) {
  console.log('C: ' +  cilckEvent.timeStamp);
}

div {cursor:pointer}

<div onclick="funA(), funB(this), funC(event)">Click me</div>

How to call multiple JavaScript functions in onclick event?

15 Answers15

Linked

Related