使用 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

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

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

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/

Answer 6

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

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

Answer 7

可能更容易的是有两个按钮并在您的函数中显示/隐藏它们。 （即。

display:none|block;

）每个按钮都可以拥有自己的 onclick 以及您需要的任何代码。

所以，一开始

button1

会是

display:block

，而

button2

会是

display:none

。然后，当您单击

button1

时，它会将

button2

切换为

display:block

，将

button1

切换为

display:none

。

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 表单会消失

Answer 9

现在您还可以使用箭头功能：

document.getElementById('buttonLED' + id).onclick = () => { writeLED (1, 1); }