Change onclick function with a Javascript function
<p>I have a button:</p>

<pre><code>&lt;button id="a" onClick="Foo()"&gt;Button A&lt;/button&gt;
</code></pre>

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

<pre><code>function Foo() {
document.getElementById("a").onClick = Bar();
}
</code></pre>

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

<pre><code>function Bar() {
document.getElementById("a").onClick = Foo();
}
</code></pre>

<p>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.</p>

<p>Here's the full code, if it helps:</p>

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