使用Javascript函数更改onclick动作

我有一个button:

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

当我第一次点击这个button时,我希望它执行Foo(它正确):

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

我第一次点击button时想要发生的事情是将onclick函数从Foo()更改为Bar() 。 到目前为止,我只能实现无限循环或根本没有变化。 Bar()看起来像这样:

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

因此,单击此button只是交替调用哪个函数。 我怎样才能使这个工作? 另外,什么是更好的方式来显示/隐藏文章的全文? 它最初开始缩短,我提供了一个“看全文”的button。 但是,当我点击那个button,我希望用户能够再次点击button,使文本的长版本消失。

这里是完整的代码,如果有帮助:

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

您的代码正在调用函数并将返回值分配给onClick,也应该是“onclick”。 这是它应该看起来。

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

看看你的其他代码,你可能想要做这样的事情:

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

分配新的onclick处理程序时不要调用该方法。

只需删除括号:

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

更新(由于新的信息 ):

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

我推荐这种方法:

而不是有两个点击处理程序,只有一个函数与if-else语句。 让BUTTON元素的状态决定if-else语句的哪个分支被执行:

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

现场演示: http : //jsfiddle.net/simevidas/hPQP9/

可能更容易的是,有两个button,并显示/隐藏你的function。 (即display:none|block; )然后每个button都可以自己用任何你需要的代码进行onclick。

所以,首先button1display:blockbutton2display:none 。 然后当你点击button1它会把button2切换到display:blockbutton1 display:none

你可以尝试像这样改变button的属性:

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

感谢JoãoPaulo Oliveira,这是我的解决scheme,其中包括一个variables(这是我的目标)。

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