Changer l'action onclick avec une fonction Javascript

J'ai un bouton:

<button id="a" onclick="Foo()">Button A</button> 

Lorsque je clique sur ce bouton la première fois, je veux qu'il exécute Foo (ce qu'il fait correctement):

 function Foo() { document.getElementById("a").onclick = Bar(); } 

Ce que je veux faire lorsque je clique sur le bouton pour la première fois est de changer la fonction onclick de Foo() à Bar() . Jusqu'à présent, je n'ai pu réaliser une boucle infinie ou aucun changement du tout. Bar() ressemblerait à ceci:

 function Bar() { document.getElementById("a").onclick = Foo(); } 

Ainsi, en cliquant sur ce bouton, il suffit d'alterner la fonction appelée. Comment puis-je que cela fonctionne? Alternativement, quelle est une meilleure façon de montrer / cacher le texte intégral d'une publication? Il commence à court terme et je propose un bouton pour "voir le texte intégral". Mais lorsque je clique sur ce bouton, je souhaite que les utilisateurs puissent cliquer à nouveau sur le bouton pour que la version longue du texte disparaisse.

Voici le code complet, s'il contribue:

 function ShowError(id) { document.getElementById(id).className = document.getElementById(id).className.replace(/\bheight_limited\b/, ''); document.getElementById(id+"Text").className = document.getElementById(id+"Text").className.replace(/\bheight_limited\b/, ''); document.getElementById(id+"Button").innerHTML = "HIDE FULL ERROR"; document.getElementById(id+"Button").onclick = HideError(id); } function HideError(id) { document.getElementById(id).className += " height_limited"; document.getElementById(id+"Text").className += " height_limited"; document.getElementById(id+"Button").innerHTML = "SHOW FULL ERROR"; document.getElementById(id+"Button").onclick = "ShowError(id)"; } 

Votre code appelle la fonction et affecte la valeur de retour à onClick, mais il devrait être 'onclick'. Voilà comment cela devrait se passer.

 document.getElementById("a").onclick = Bar; 

En regardant votre autre code, vous voulez probablement faire quelque chose comme ceci:

 document.getElementById(id+"Button").onclick = function() { HideError(id); } 
 var Foo = function(){ document.getElementById( "a" ).setAttribute( "onClick", "javascript: Boo();" ); } var Boo = function(){ alert("test"); } 

Ne pas invoquer la méthode lors de l'attribution du nouveau onclick .

Supprimez simplement les parenthèses:

 document.getElementById("a").onclick = Foo; 

MISE À JOUR (en raison de nouvelles informations ):

 document.getElementById("a").onclick = function () { Foo(param); }; 

Je recommande cette approche:

Au lieu d'avoir deux gestionnaires de clics, n'utilisez qu'une fonction avec une instruction if-else. Laissez l'état de l'élément BUTTON déterminer quelle branche de l'instruction if-else est exécutée:

HTML:

 <button id="a" onclick="toggleError(this)">Button A</button> 

JavaScript:

 function toggleError(button) { if ( button.className === 'visible' ) { // HIDE ERROR button.className = ''; } else { // SHOW ERROR button.className = 'visible'; } } 

Démo en direct: http://jsfiddle.net/simevidas/hPQP9/

Vous pouvez essayer de modifier l'attribut bouton comme ceci:

 element.setAttribute( "onClick", "javascript: Boo();" ); 

Ce qui pourrait être plus facile, c'est avoir deux boutons et les afficher / cacher dans vos fonctions. (C'est-à-dire display:none|block; ) Chaque bouton pourrait alors avoir son propre clic sur n'importe quel code dont vous avez besoin.

Ainsi, au premier button1 serait display:block et le button2 seraient display:none . Ensuite, lorsque vous cliquez sur le button1 il serait commuté sur la button2 pour être display:block et button1 à display:none .

Merci à João Paulo Oliveira, c'était ma solution qui comprend une variable (qui était mon but).

 document.getElementById( "myID" ).setAttribute( "onClick", "myFunction("+VALUE+");" );