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+");" );