使用Javascript函数更改onclick操作

我有一个按钮：

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

您的代码正在调用该函数，并将返回值分配给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/

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

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

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

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

可能更容易的是具有两个按钮，并在您的功能中显示/隐藏它们。（即display:none|block;）然后，每个按钮都可以拥有您自己的onclick，无论您需要什么代码。

因此，起初button1将是display:block并且button2将是display:none。然后，当你点击button1它会切换button2是display:block和button1是display:none。

对于像我这样的人，尝试在操作上设置查询字符串，并想知道为什么它不起作用-

您不能为GET表单提交设置查询字符串，但是我发现可以为POST设置查询字符串。

对于GET提交，您必须在隐藏的输入中设置值，例如

的动作："/handleformsubmission?foo=bar" 将被添加为隐藏字段，例如：<input type="hidden" name="foo" value="bar" />

可以在JavaScript中动态添加为（其中clickedButton是被单击的提交按钮：

var form = clickedButton.form;
var hidden = document.createElement("input");
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", "foo");
hidden.setAttribute("value", "bar");
form.appendChild(hidden);

请参阅此问题以获取更多信息，以 提交带有查询字符串参数且隐藏参数消失的GET表单。