使用Javascript函数更改onclick操作

我有一个按钮：

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

第一次单击按钮时，我希望将onclick函数从

Foo（）

更改为

Bar（）

。到目前为止，我只能实现一个无限循环，或者根本没有改变

Bar（）

看起来像这样：

document.getElementById(id+"Button").onclick = function() { HideError(id); }

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

功能条（）{
document.getElementById（“a”）.onclick=Foo（）；
}

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

以下是完整的代码，如果有帮助的话：

功能错误（id）{
document.getElementById（id）.className=document.getElementById（id）.className.replace（/\bheight\u limited\b/，“”）；
document.getElementById（id+“Text”）.className=document.getElementById（id+“Text”）.className.replace（/\bheight\u limited\b/，“”）；
document.getElementById（id+“按钮”）.innerHTML=“隐藏完整错误”；
document.getElementById（id+“按钮”）.onclick=HideError（id）；
}
函数HideError（id）{
document.getElementById（id）.className+=“高度限制”；
document.getElementById（id+“Text”）.className+=“高度限制”；
document.getElementById（id+“按钮”）.innerHTML=“显示完整错误”；
document.getElementById（id+“按钮”）.onclick=“淋浴器（id）”；
}

在分配新的

onclick

处理程序时，不要调用该方法

只需删除括号：

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

更新（由于）：

---

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

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

查看其他代码，您可能希望执行以下操作：

document.getElementById(id+"Button").onclick = function() { HideError(id); }

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

---

我建议采取这种办法：

与其有两个单击处理程序，不如只有一个带有if-else语句的函数。让BUTTON元素的状态确定执行if else语句的哪个分支：

HTML:

---

现场演示：

更简单的方法是使用两个按钮，并在功能中显示/隐藏它们。（即，

display:none | block；

）然后每个按钮都可以有自己的onclick，其中包含您需要的任何代码

---

因此，首先

button1

将是

display:block

，

button2

将是

display:none

。然后，当您单击

button1

时，它会将

button2

切换为

display:block

并将

button1

切换为

display:none

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

document.getElementById(id+"Button").onclick = function() { HideError(id); }

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

var Boo = function(){
    alert("test");
}

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

---

多亏了若昂·保罗·奥利维拉，这是我的解决方案，其中包括一个变量（这是我的目标）

---

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

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

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

操作：

“/handleformsubmission？foo=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);

有关更多信息，请参见此问题

---

---

我不是在回答这个问题，因为您是专门询问vanilla JavaScript，但您可能想了解jQuery。它是一个JavaScript库，可以帮助您完成您在问题中想要做的事情。了解jQuery，在这种情况下只能使用JavaScript。谢谢。

onclick

属性应该是小写的。事件处理程序不是使用+=？添加的吗？也许您甚至需要这样做：

myobject.onclick+=function（）{Foo（）；}

结果证明我不需要+=。我认为+=不会删除现有的onclick函数，对吗？不幸的是，我有一个参数需要在那里。这会改变你的答案吗？@hatorade:use-onclick=function（）{Foo（params）；}；@hatorade-Yes

document.getElement…function（）{Foo（param）；}

谢谢大家的帮助。如果可能的话，我会给你答案，但Ryan会提前几分钟得到。对不起：（.但是我做了+1！应该是吗？onclick不是。onclick？这似乎是最好的方法。虽然其他方法可行，但在某些情况下，直接向onclick添加函数可能不起作用。在循环中创建多个按钮并为循环中的每个按钮分配onclick函数不起作用的情况下，我遇到了一个问题。这会很糟糕将最后一个按钮的函数指定给所有按钮。使用此方法就像一个符咒。谢谢！应该是

onclick

，而不是

onclick

@user66001。没关系，HTML不是这种情况sensitive@Calne-camel case'ng它可能会让人们认为它需要。这仍然是真的吗？'onClick'对我不起作用，但是'onClick'是的。在Windows 7 64位上使用Chrome 47。只是想补充一点，Ryan不在Bar后面包含括号，因为它不是函数调用……您可能希望执行以下操作：。onclick=HideError；//如果这不起作用，为什么不呢。与上面的答案有什么区别？@pashute区别在于

。onclick=HideError

将调用

HideError（事件：MouseEvent）

而上面的答案调用

HideError（id）

。如果你不关心参数，那么你可以使用较短的版本，忽略传入的事件。答案很好！对于不太熟悉javascript的人来说，这是一个非常有用的方法。我个人喜欢这个解决方案，因为它将按钮的代码保存在一起（作为一个切换，如果你更新了一边，通常你会想更新另一边），但我也在使用Vue和v-