Onclick call two functions at once Javascript [duplicate]

2

Good morning, it is possible when you click on a button to run two onclick functions at once, eg two different alerts?

    
asked by anonymous 04.08.2016 / 17:18

4 answers

0

If I understood correctly the doubt I think is this:

function funcao_a() {
  alert('funcao A');
}
function funcao_b() {
  alert('funcao B');
}
<button id="btn" onclick="funcao_a();funcao_b();">Clica</button>

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

If you have many functions, you do not want them all to be inside onclick="..." , you 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>
    
04.08.2016 / 17:30
5

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 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 binds all other functions and add only it to the listener . I would recommend an auxiliary function for that case, as a compositing 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 function call order is the last argument for the first argument (right to left), that is, funcaoB will be called first and then funcaoA .

    
04.08.2016 / 18:32
4

in inline form or set onclick , but you can add EventListener to 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" />
    
04.08.2016 / 17:27
4

Vitor, you can call as many functions as you want by separating them with ; like this:

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

But it would be best 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 OK, it is not possible to display 2 at the same time. You can choose to display some message on the screen. Example: link

    
04.08.2016 / 18:59