Onclick calling two functions at the same time Javascript

Question

Good morning, it is possible when clicking on a button run by onclick two functions at the same time, ex: two different Alert?

Answer 1

Tobymosque’s solution fits perfectly, but to give you another alternative, I’ll show you another way to solve the problem. This example is for if you want to add the events and no longer want to work with them (remove a specific one, add new ones, "replace" an event), you can create a function that unites all the other functions and add only it to the listener. I would recommend an auxiliary function for this case, as a composition function with the bitwise and operator. It would look something like this:

var clickMe = document.getElementById("clickMe");
var reduce = Function.call.bind(Array.prototype.reduce);

var bitAnd = function(f, g) {
  return function() {
    return g.apply(this, arguments) & f.apply(this, arguments);
  }
}

bitAnd.all = function() {
  return reduce(arguments, bitAnd);
}

function funcaoA(a) {
  alert('funcao A' + a);
}

function funcaoB(a) {
  alert('funcao B' + a);
}

clickMe.addEventListener('click', bitAnd.all(funcaoA, funcaoB));

Note that the call order of the functions is from the last argument to the first argument (right to left), i.e., funcaoB will be called first and then funcaoA.

Answer 2

so inline or setting the onclick no, but it is possible to add a EventListener at the DOM.

var clickMe = document.getElementById("clickMe");

var funcaoA = function functionA(event) {
  console.log(funcaoA.name);
}

var eventHandler = {
  name: "eventHandler", 
  handleEvent: function (event) {
    console.log(eventHandler.name);
  }  
}

clickMe.addEventListener("click", funcaoA);
clickMe.addEventListener("click", function functionB(event) {
  console.log(functionB.name);
});
clickMe.addEventListener("click", eventHandler);

<input id="clickMe" type="button" value="Click Me" />

Answer 3

Vitor, you can call as many functions as you want by separating them by ; thus:

<input type="button" onClick="javarscipt:alert('Funcao 1');alert('Funcao2')">

But it would be better to call a function that calls others:

<input type="button" onClick="javarscipt:funcoes()">


<script>
function funcoes() {
    funcao1();
    funcao2('Stack');
    funcao2('Overflow');
}

funcao1() {
    alert('Funcao 1');
}

funcao2(txt) {
    alert(txt);
}

</script>

Since Alert is a function that blocks the browser until it is clicked on OK, it is not possible to display 2 at the same time. You can choose to display some message on the screen. Example: http://www.w3schools.com/bootstrap/bootstrap_alerts.asp

Answer 4

If I understand the doubt I think this is it:

function funcao_a() {
  alert('funcao A');
}
function funcao_b() {
  alert('funcao B');
}

<button id="btn" onclick="funcao_a();funcao_b();">Clica</button>

In my opinion (which is not very extensive), can put javascript inside the onclick=".." or any other event, and so calls the two or more functions you want

If you have many functions, you don’t want them all within the onclick="...", can do:

var funcs_bt1 = {
  func1: function() {
    alert('bt1 func1'); 
  },
  func2: function() {
    alert('bt1 func2'); 
  },
  func3: function() {
    alert('bt1 func3'); 
  }
};
var funcs_bt2 = {
  func1: function() {
    alert('bt2 func1'); 
  },
  func2: function() {
    alert('bt2 func2'); 
  },
  func3: function() {
    alert('bt2 func3'); 
  }
};
function call_funcs(ele) {
  var id = ele.id;
  if(id == 'btn1') {
    var funcs = funcs_bt1;
  }
  else {
    var funcs = funcs_bt2;
  }
  for(i in funcs) {
    funcs[i]();
  }
}

<button id="btn1" onclick="call_funcs(this);">btn1</button>
<button id="btn2" onclick="call_funcs(this);">btn2</button>