¿Cómo llamar a dos métodos en el método onClick de los botones en HTML o JavaScript?

Question

¿Cómo llamar a dos métodos en el método onClick de los botones en HTML o JavaScript?

Answer 1

1. Prueba esto:

   <input type="button" onclick="function1();function2();" value="Call2Functions" /> 
   

2. O llame segunda función al final de la primera función:

   function func1(){ 
       //--- some logic 
       func2(); 
       } 
   
       function func2(){ 
       //--- some logic 
       } 
   

   ... y llamar a func1() onclick del botón:

   <input type="button" onclick="func1();" value="Call2Functions" /> 
   

Answer 2

Como se ha dicho por Harry alegría, puede hacerlo en la onclick attr así:

<input type="button" onclick="func1();func2();" value="Call2Functions" /> 

O, en sus JS así:

document.getElementById('Call2Functions').onclick = function() 
{ 
    func1(); 
    func2(); 
}; 

O, si está asignando un onclick mediante programación y no están seguros de si existía un onclick anterior (y no quieren sobreescribirla):

var Call2FunctionsEle = document.getElementById('Call2Functions'), 
    func1 = Call2FunctionsEle.onclick; 

Call2FunctionsEle.onclick = function() 
{ 
    if(typeof func1 === 'function') 
    { 
     func1(); 
    } 
    func2(); 
}; 

Si necesita las funciones se ejecutan en el alcance del elemento que w como se hace clic, una utilización sencilla de aplicar podría hacerse:

document.getElementById('Call2Functions').onclick = function() 
{ 
    func1.apply(this, arguments); 
    func2.apply(this, arguments); 
}; 

Answer 3

El moderno evento manejando método:

element.addEventListener('click', startDragDrop, false); 
element.addEventListener('click', spyOnUser, false); 

El primer argumento es el caso, la segunda es la función y el tercero especifica si se debe permitir el burbujeo del evento.

De QuirksMode: especificación de eventos DOM Nivel 2

del W3C presta especial atención a los problemas del modelo tradicional. Ofrece una manera simple de registrar tantos manejadores de eventos como desee para el mismo evento en un elemento.

La clave para el modelo de registro de eventos del W3C es el método addEventListener(). Le das tres argumentos: el tipo de evento, la función que se ejecutará y un booleano (verdadero o falso) que explicaré más adelante.Para registrar nuestra función bien conocida doSomething() a la onclick de un elemento que hace:

Todos los detalles aquí: http://www.quirksmode.org/js/events_advanced.html

usando jQuery

si estás usando jQuery, hay una buena API para la gestión de eventos:

$('#myElement').bind('click', function() { doStuff(); }); 
$('#myElement').bind('click', function() { doMoreStuff(); }); 
$('#myElement').bind('click', doEvenMoreStuff); 

Todos los detalles aquí: http://api.jquery.com/category/events/

Answer 4

<input type="button" onclick="functionA();functionB();" /> 

function functionA() 
{ 

} 

function functionB() 
{ 

} 

Answer 5

Hola,

También puede hacer lo que, como a continuación ... De esta manera, sus funciones tanto deben llamar y si ambas funciones devuelven verdad, entonces volverán cierto otra cosa return false.

<input type="button" 
    onclick="var valFunc1 = func1(); var valFunc2 = func2(); if(valFunc1 == true && valFunc2 ==true) {return true;} else{return false;}" 
    value="Call2Functions" /> 

Gracias, Vishal Patel