Change onclick action with a Javascript function

Question

I have a button:

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

When I click this button the first time, I want it to execute Foo (which it does correctly):

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

What I want to happen when I click the button the first time is to change the onclick function from Foo() to Bar(). Thus far, I've only been able to achieve an infinite loop or no change at all. Bar() would look something like this:

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

Thus, clicking this button is just alternating which function gets called. How can I get this to work? Alternatively, what's a better way to show/hide the full text of a post? It originally starts shorted, and I provide a button to "see the full text." But when I click that button I want users to be able to click the button again to have the long version of the text go away.

Here's the full code, if it helps:

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

Your code is calling the function and assigning the return value to onClick, also it should be 'onclick'. This is how it should look.

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

Looking at your other code you probably want to do something like this:

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

Answer 2

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