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

Answer 1

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

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

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

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

Answer 3

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

只需删除括号：

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

更新（由于新的信息 ）：

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

Answer 4

我推荐这种方法：

而不是有两个点击处理程序，只有一个函数与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/

Answer 5

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

所以，首先button1是display:block ， button2是display:none 。 然后当你点击button1它会把button2切换到display:block和button1 display:none 。

Answer 6

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

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

Answer 7

感谢JoãoPaulo Oliveira，这是我的解决scheme，其中包括一个variables（这是我的目标）。

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