使用Javascript函数更改onclick操作

Question

我有一个按钮:

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

当我第一次单击此按钮时,我希望它执行Foo(它正确执行):

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

当我第一次单击按钮时,我想要发生的是将onclick功能更改Foo()为Bar().到目前为止,我只能实现无限循环或根本没有变化.Bar()看起来像这样:

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

因此,单击此按钮只是交替调用哪个函数.我怎样才能让它发挥作用？或者,什么是显示/隐藏帖子全文的更好方法？它最初开始短路,我提供了一个"查看全文"的按钮.但是当我点击该按钮时,我希望用户能够再次单击该按钮以使文本的长版本消失.

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

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

感谢JoãoPauloOliveira,这是我的解决方案,其中包含一个变量(这是我的目标).

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

Answer 6

您可以尝试更改按钮属性，如下所示：

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