web-dev-qa-db-fra.com

Comment appeler deux méthodes sur la méthode onclick du bouton en HTML ou JavaScript?

Comment appeler deux méthodes sur la méthode onclick du bouton en HTML ou JavaScript?

javascripthtmlonclick
26
Nirav

  1. Essaye ça:

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

  2. Ou appelez la deuxième fonction à la fin de la première fonction:

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

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

    ... et appelez func1 () en cliquant sur le bouton:

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

Comme indiqué par Harry Joy, vous pouvez le faire sur le onclick attr comme ceci:

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

Ou, dans votre JS comme ça:

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

Ou, si vous attribuez un onclick par programme et n'êtes pas sûr de l'existence d'un onclick précédent (et que vous ne souhaitez pas l'écraser):

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

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

Si vous avez besoin que les fonctions s'exécutent dans la portée de l'élément sur lequel vous avez cliqué, une simple utilisation de apply pourrait être faite:

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

La méthode moderne de gestion des événements: 

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

Le premier argument est l'événement, le second est la fonction et le troisième spécifie s'il faut autoriser la propagation d'événement.

De QuirksMode :

La spécification d'événement DOM niveau 2 du W3C accorde une attention particulière aux problèmes du modèle traditionnel. Il offre un moyen simple d'enregistrer autant de gestionnaires d'événements que vous le souhaitez pour le même événement sur un élément.

La clé du modèle d'enregistrement d'événement W3C est la méthode addEventListener(). Vous lui donnez trois arguments: le type d'événement, la fonction à exécuter et un booléen (vrai ou faux) que j'expliquerai plus tard. Pour enregistrer notre fonction doSomething () bien connue au clic d'un élément que vous faites:

Tous les détails ici: http://www.quirksmode.org/js/events_advanced.html

Utilisation de jQuery

si vous utilisez jQuery, il existe une belle API pour la gestion des événements:

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

Tous les détails ici: http://api.jquery.com/category/events/

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

function functionA()
{

}

function functionB()
{

}
2
Arrabi

Salut,

Vous pouvez également faire comme ci-dessous ... De cette façon, vos deux fonctions doivent appeler et si les deux fonctions retournent vrai, alors il retournera vrai sinon retournera faux.

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

Merci, Vishal Patel

1
Vishal Patel