Me gustaría saber si es posible llamar a varias funciones con un botón html.

<button onclick:"functions()">Calls</button>

Entonces, ¿alguien podría tratar de explicarme si es posible y cómo y tal vez mostrarme a través de algunos fragmentos de código o algo así?

-1
Jean Mira 9 may. 2020 a las 07:16

5 respuestas

La mejor respuesta

Sí, es posible, así:

Html:

<button onclick="functions()">Calls</button>

Javascript:

function functions() {
    function1();
    function2();
}
function functions() {
    function1();
    function2();
}
function function1() {
    console.log("function1 was called")
}
function function2() {
    console.log("function2 was called")
}
<button onclick="functions()">Calls</button>

Más o menos:

Html:

<button onclick="function1();function2();">Calls</button>

Javascript:

function function1() {
    //whatever you want which will be called first by the button
}
function function2() {
    //whatever you want which will be called second by the button
}
function function1() {
    console.log("function1 was called first")
}
function function2() {
    console.log("function2 was called second")
}
<button onclick="function1();function2();">Calls</button>
2
Woold 9 may. 2020 a las 04:30

En primer lugar, es mejor no utilizar onclick en absoluto y adjuntar el controlador de eventos al nodo DOM a través de su código Javascript. Esto se conoce como Unobtrusive_JavaScript.

Para vincular múltiples funciones a un botón, puede hacer esto (pero es no preferido ):

function fn(){
  console.log('fn is called!');
}

function fn2(){
  console.log('fn2 is called!');
}

function fn3(){
  console.log('fn3 is called!');
}
<button onclick="fn(); fn2(); fn3();">Calls</button>

O vincule su función con addEventListener de esta manera (este es el enfoque más preferido para llamar a múltiples funciones):

document.getElementsByTagName('button')[0].addEventListener('click', function(){
  fn();
  fn2();
  fn3();
})

function fn() {
  console.log('fn is called!');
}

function fn2() {
  console.log('fn2 is called!');
}

function fn3() {
  console.log('fn3 is called!');
}
<button>Calls</button>
4
SMAKSS 9 may. 2020 a las 04:32

Puede separar las llamadas a funciones en el valor del atributo onclick con un carácter de punto y coma.

Tenga en cuenta también que onclick:"functions()" no es la sintaxis válida, debe asignar el valor del atributo con =:

function one(){
  console.log('function one is called');
}
function two(){
  console.log('function two is called');
}
<button onclick="one(); two()">Calls</button>
0
Mamun 9 may. 2020 a las 04:21

Puedes ejecutar múltiples funciones por orden

function f1()
{
  alert("execution of f1");
}
function f2()
{
  alert("execution of f2");
}
function f3()
{
  alert("execution  of f3");
}
<button onclick="f1();f2();f3();">Click Me</button>
0
Ahmad Hamzavi 9 may. 2020 a las 04:23

Puedes hacer eso:

<button onclick="function1();function2()">Calls</button>
1
Rob Nisru 9 may. 2020 a las 04:25