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

- Tony Stark

---

我不会把这作为答案，因为你特别询问原生JavaScript，但你可能想了解一下jQuery。它是一个JavaScript库，可以帮助你在问题中实现你所寻求的功能。 - JasCav

了解 JQuery，此情况下只能使用 Javascript。谢谢。 - Tony Stark

onclick 属性应该全部小写。https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onclick - Matt Ball

事件处理程序不是通过使用+=添加的吗？也许你甚至需要这样做：myobject.onclick += function() { Foo(); } - Mikael Östberg

原来我不需要使用+=。我觉得+=不会移除现有的onclick函数，对吗？ - Tony Stark

Answer 1

你的代码正在调用函数并将返回值分配给onClick，另外它应该是'onclick'。这是正确的写法。

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

从您的其他代码来看，您可能想要像这样做：

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

- Ryan

---

只是想补充一下，Ryan没有在“Bar”后面加括号是因为它不是一个函数调用。 - GoldfishGrenade

你可能想要像这样做：.onclick = HideError; // 如果这行不起作用，为什么不试试。与上面的答案有什么区别？ - pashute

@pashute 不同之处在于 .onclick = HideError 将调用 HideError(event: MouseEvent)，而上面的答案调用了 HideError(id)。如果您不关心参数，则可以使用较短的版本并忽略传递的事件。 - Patrick

Answer 2

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

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

- Otuyh

---

这似乎是最好的方法。虽然其他方法也可以，但直接将函数添加到onclick可能在某些情况下无法正常工作。我曾经遇到过这样的问题，在一个循环中创建多个按钮并为每个按钮分配一个onclick函数时，它并没有起作用。它会将最后一个按钮的函数分配给所有按钮。使用这种方法非常有效。感谢Hor！ - Deepak G M

应该使用 onclick，而不是 onClick。 - user66001

@user66001 没关系，HTML 不区分大小写。 - Kyle

@Calne - 骆驼命名法可能会让人们认为它需要被修改。 - user66001

这还有效吗？'onClick' 对我不起作用，但 'onclick' 可以。使用 Chrome 47 在 Windows 7 64 位上。 - Sujay Phadke

Answer 3

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

只需删除括号：

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

根据新的信息更新：

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

- John Giotta

---

很遗憾，我有一个必须存在的参数。这会改变你的答案吗？ - Tony Stark

@hatorade：使用onclick = function() { Foo(params); }; - Reid

谢谢大家的帮助。如果我能的话，我会给你们答案的，但是Ryan比我早几分钟得到了答案。很抱歉:(。不过我已经点了+1！ - Tony Stark

应该使用 .onclick 而不是 .onClick 吗？ - GlennG

@GlennG 个人而言，我从未看到过区别，但文档说小写的 onclick。 - John Giotta

Answer 4

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

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

- TheSatinKnight

Answer 5

我建议采用这种方法：

不要有两个点击事件处理程序，只需使用一个带有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/

- Šime Vidas

---

我个人喜欢这个解决方案，因为它将按钮的代码放在一起（而且作为一个切换按钮，如果你更新了一侧，通常也要更新另一侧），但我也在使用Vue和v-on:click，所以顶部答案似乎对我不起作用。 谢谢Sime！ - OhFiddleDiddle

Answer 6

您可以尝试像这样更改按钮属性：

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

- João Paulo Oliveira

Answer 7

可能更容易的方法是在您的函数中使用两个按钮并显示/隐藏它们。(即display:none|block;)然后每个按钮都可以有自己的onclick，具有您需要的任何代码。

因此，首先button1将是display:block，而button2将是display:none。然后，当您单击button1时，它会将button2切换为display:block，并将button1切换为display:none。

- Richard Marskell - Drackir

---

完美的答案！对于不太熟悉JavaScript的人来说，这是一个非常有用的方法。 - RolandiXor

Answer 8

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

您无法为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表单，同时隐藏参数消失

- anotheruser1488182