变化的onclick用JavaScript函数动作

我有一个按钮：变化的onclick用JavaScript函数动作

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

来源

2011-03-14 sepiroth

我不是这个答案，因为你是专门询问有关香草JavaScript的，但你可能想看看jQuery。这是一个JavaScript库，可以帮助你做你想要在你的问题中做的事情。 – JasCav 2011-03-14 20:12:20

了解JQuery，只能在这种情况下使用Javascript。谢谢。 – sepiroth 2011-03-14 20:13:28

'onclick'属性应该全部小写。 https://developer.mozilla.org/en/DOM/element.onclick – 2011-03-14 20:15:33

您的代码调用函数并分配返回值的onClick，也应该是“的onclick ”。这是它应该看起来的样子。在你的其他代码

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

寻找你可能想要做这样的事情：

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

来源

2011-03-14 20:14:58 Ryan

只是想补充说，瑞安不包括括号因为它不是一个函数调用 – GoldfishGrenade 2014-11-07 04:01:31

...你可能想要做这样的事情： .onclick = HideError; //如果这不起作用，为什么不呢？上面的差异是什么答案？ – pashute 2016-06-01 04:04:49

指定新onclick处理程序时，不要调用该方法。

只需删除括号：

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

UPDATE（由于new information）：

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

来源

2011-03-14 20:13:48

不幸的是，我有一个参数需要在那里。这会改变你的答案吗？ – sepiroth 2011-03-14 20:15:16

@hatorade：使用onclick = function（）{Foo（params）; }; – Reid 2011-03-14 20:17:00

@hatorade - 是'document.getElement ... function（）{Foo（param）;};' – 2011-03-14 20:18:12

我推荐这种方法：

不是有两个点击处理程序，有一个只有一个功能if-else语句。释放按钮元件的状态确定的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/

来源

2011-03-14 20:15:31

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

因此，在第一button1是display:block和button2是display:none。然后当您点击button1它会将button2切换为display:block和button1为display:none。

来源

2011-03-14 20:18:29

完美的答案！对于不熟悉JavaScript的人来说，这是一个非常有用的方法。 – RolandiXor 2017-09-15 03:37:35

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

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

来源

2011-03-14 20:23:06 Otuyh

这似乎是实现它的最好方法，尽管其他工作方式，直接向onclick添加函数可能无法在某些情况下工作。在循环中创建多个按钮并为循环w中的每个按钮分配onclick函数的情况下的问题因为不工作。它会将最后一个按钮的功能分配给所有按钮。使用这种方法就像一个魅力。谢谢霍尔！ – 2013-01-22 08:59:01

应该是'onclick'，而不是'onClick'。 – user66001 2014-03-30 15:22:23

@ user66001没关系，HTML不区分大小写 – Kyle 2015-09-11 13:59:35

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

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

来源

2014-11-05 17:42:08

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

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

来源

2017-05-08 01:44:23 TheSatinKnight

变化的onclick用JavaScript函数动作

回答

相关问题