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;

更新（由于new information）：

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

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

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

Answer 6

更简单的方法是使用两个按钮并在功能中显示/隐藏它们。（即。display:none|block;）然后每个按钮都可以使用您需要的任何代码进行单击。

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

Answer 7

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

您无法为GET表单提交设置查询字符串，但我发现您可以进行POST。

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

行动：<input type="hidden" name="foo" value="bar" /> 将被添加为隐藏字段，如：var form = clickedButton.form; var hidden = document.createElement("input"); hidden.setAttribute("type", "hidden"); hidden.setAttribute("name", "foo"); hidden.setAttribute("value", "bar"); form.appendChild(hidden);

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

{{1}}

有关详细信息，请参阅此问题 submitting a GET form with query string params and hidden params disappear

使用Javascript函数更改onclick操作

7 个答案: