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

User · Answer

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:

_x000D_

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

_x000D_

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

_x000D_

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Sure  simply bind multiple listeners to it   Short cutting with jQuery   x000D   x000D      id   bind  click   function     x000D    alert  Event 1    x000D      x000D      foo   bind  click   function     x000D    alert  Foo class    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  foo  id  id  gt Click lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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     x000D   x000D  function funA     x000D    console log  A    x000D    x000D   x000D  function funB clickedElement    x000D    console log  B      clickedElement innerText   x000D    x000D   x000D  function funC cilckEvent    x000D    console log  C       cilckEvent timeStamp   x000D    x000D  div  cursor pointer  x000D   lt div onclick  funA    funB this   funC event   gt Click me lt  div gt  x000D   x000D   x000D

User · Answer

A link with 1 function defined   lt a href     onclick  someFunc    gt Click me To fire some functions lt  a gt    Firing multiple functions from someFunc    function someFunc         showAlert        validate        anotherFunction        YetAnotherFunction

User · Answer

You can compose all the functions into one and call them Libraries like Ramdajs has a function to compose multiple functions into one    lt a href     onclick  R compose fn1 fn2 fn3     gt Click me To fire some functions lt  a gt    or you can put the composition as a seperate function in js file and call it   const newFunction   R compose fn1 fn2 fn3      lt a href     onclick  newFunction    gt Click me To fire some functions lt  a gt

User · Answer

ES6 React   lt MenuItem   onClick       gt        this props toggleTheme        this handleMenuClose          gt

User · Answer

x000D   x000D  var btn   document querySelector   twofuns    x000D  btn addEventListener  click  method1   x000D  btn addEventListener  click  method2   x000D  function method2    x000D    console log  Method 2    x000D    x000D  function method1    x000D    console log  Method 1    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt Pramod Kharade-Javascript lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt button id  twofuns  gt Click Me  lt  button gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    You can achieve call one event with one or more methods

[javascript] How to call multiple JavaScript functions in onclick event?

Examples related to javascript

Examples related to html

Examples related to onclick