Cambio onclick acción con una función Javascript

Question

tengo un botón:

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

Al hacer clic en este botón la primera vez, quiero que se ejecute Foo (que lo hace correctamente):

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

Lo que quiero que suceda cuando haga clic en el botón la primera vez es cambiar la función onclick de Foo() a Bar(). Hasta ahora, solo he podido lograr un ciclo infinito o ningún cambio en absoluto. Bar() sería algo como esto:

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

Por lo tanto, al hacer clic en este botón es sólo alterna cuya función es llamada. ¿Cómo puedo hacer que esto funcione? Alternativamente, ¿cuál es una mejor manera de mostrar/ocultar el texto completo de una publicación? Originalmente se inicia un cortocircuito, y proporciono un botón para "ver el texto completo". Pero cuando hago clic en ese botón, quiero que los usuarios puedan hacer clic nuevamente en el botón para que desaparezca la versión larga del texto.

Aquí está el código completo, si ayuda:

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

Answer 1

Su código está llamando a la función y asignar el valor devuelto a onclick, también debe ser 'onclick '. Así es como debería verse.

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

En cuanto a su otro código que probablemente va a querer hacer algo como esto:

document.getElementById(id+"Button").onclick = function() { HideError(id); } 

Answer 2

no se debe invocar el método de la asignación del nuevo manejador onclick.

Simplemente quite el paréntesis:

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

ACTUALIZACIÓN (debido a new information):

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

Answer 3

recomiendo este enfoque:

En lugar de tener dos controladores de clic, tener sólo una función con una declaración if-else. Dejar que el estado del elemento BUTTON determinar qué rama de la instrucción if-else es ejecutado:

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'; 
    } 
} 

Demostración en directo:http://jsfiddle.net/simevidas/hPQP9/

Answer 4

Lo que podría ser más fácil, es tener dos botones y mostrarlos/esconderlos en sus funciones. (es decir, display:none|block;) Cada botón podría tener su propio clic con el código que necesite.

Por lo tanto, al principio button1 sería display:block y button2 sería display:none.Luego, cuando haga clic en button1, cambiaría button2 para que sea display:block y button1 para que sea display:none.

Answer 5

var Foo = function(){ 
    document.getElementById("a").setAttribute("onClick", "javascript: Boo();"); 
} 

var Boo = function(){ 
    alert("test"); 
} 

Answer 6

Usted podría intentar cambiar el atributo botón de la siguiente manera:

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

Answer 7

Gracias a João Paulo Oliveira, este fue mi solución que incluye una variable (que era mi objetivo).

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