Change onclick action with a Javascript function

问题:

I have a button:

Button A 

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

回答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); }

回答2:

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

回答3:

Do not invoke the method when assigning the new onclick handler.

Simply remove the parenthesis:

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

UPDATE (due to new information):

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

回答4:

I recommend this approach:

Instead of having two click handlers, have only one function with a if-else statement. Let the state of the BUTTON element determine which branch of the if-else statement gets executed:

HTML:

Button A 

JavaScript:

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

Live demo: http://jsfiddle.net/simevidas/hPQP9/

回答5:

What might be easier, is to have two buttons and show/hide them in your functions. (ie. display:none|block;) Each button could then have it's own onclick with whatever code you need.