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


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


25
2018-05-04 10:56


origine


Réponses:


  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" />
    

45
2018-05-04 10:57



Comme l'a déclaré Harry Joy, vous pouvez le faire sur le onclick attr comme ça:

<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 programmation et que vous ne savez pas si un onclick précédent existait (et 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 des fonctions exécutées dans le cadre de l'élément sur lequel vous avez cliqué, vous pouvez utiliser simplement les fonctions suivantes:

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

20
2018-05-04 11:03



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 diffusion des événements.

De Mode de quirks:

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 même élément.

La clé du modèle d'enregistrement des événements du 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 bien connue doSomething () sur le onclick d'un élément que vous faites:

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

Utiliser jQuery

Si vous utilisez jQuery, il existe une bonne 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
2018-05-04 11:03



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

function functionA()
{

}

function functionB()
{

}

2
2018-05-04 12:08



Salut,

Vous pouvez aussi faire comme ci-dessous ... De cette façon, vos deux fonctions devraient appeler et si les deux fonctions renvoient true, alors true retournera sinon. False.

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

Je vous remercie, Vishal Patel


1
2017-10-21 14:42