javascript 使用javascript动态更改按钮的onclick功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17277648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change onclick function of the button dynamically using javascript
提问by Hyman_of_All_Trades
How can I change onclick behavior of button dynamically using javascript?
如何使用javascript动态更改按钮的onclick行为？
Here is what I meant:
这是我的意思：
I have following buttons:
我有以下按钮：
<button class="num" onclick="getval(0)">0</button>
<button class="num" onclick="getval(1)">1</button>
<button class="num" onclick="getval(2)" >2</button>
<button class="num" onclick="getval(3)" >3</button>
function getval(){
...............
}
function getvalNew(){
..............
}
How can I make the buttons to switch from getval() to getvalNew() and reset it again?
如何让按钮从 getval() 切换到 getvalNew() 并再次重置？
采纳答案by enhzflep
Here's an approach, based on my blank.htmltemplate.
这是一种基于我的blank.html模板的方法。
Note: in setAllFunc3, you could attach several handlers to the one element. You can also remove them selectively. See another member's note about getAllByClassName.
注意：在 setAllFunc3 中，您可以将多个处理程序附加到一个元素。您也可以有选择地删除它们。请参阅其他成员关于 getAllByClassName 的说明。
Also note: by attaching the handler, we get access to the thisvar. This means we know which element triggered the call. I have simply extracted the text from the button. You could instead get the value for an attribute, that you then use in the handler.
Probably something for you to discover a little later. :)
另请注意：通过附加处理程序，我们可以访问thisvar。这意味着我们知道哪个元素触发了调用。我只是从按钮中提取了文本。您可以改为获取属性的值，然后在处理程序中使用该值。可能是你稍后发现的东西。:)
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
window.addEventListener('load', mInit, false);
function mInit()
{
}
function getval(inputVar)
{
alert(inputVar + " was passed to getval");
}
function getvalNew(inputVar)
{
alert("getvalNew(" + inputVar + ")");
}
function setAllFunc1()
{
var tgtButtons = document.getElementsByClassName('num');
var i, n = tgtButtons.length;
for (i=0; i<n; i++)
tgtButtons[i].setAttribute('onclick', 'getval(' + i + ')' );
}
function setAllFunc2()
{
var tgtButtons = document.getElementsByClassName('num');
var i, n = tgtButtons.length;
for (i=0; i<n; i++)
tgtButtons[i].setAttribute('onclick', 'getvalNew(' + i + ')' );
}
function myFunc3()
{
var clickedBtn = this;
var btnText = clickedBtn.innerHTML;
alert("You clicked the button labelled: " + btnText);
}
function setAllFunc3()
{
var tgtButtons = document.getElementsByClassName('num');
var i, n = tgtButtons.length;
for (i=0; i<n; i++)
{
tgtButtons[i].removeAttribute('onclick');
tgtButtons[i].addEventListener('click', myFunc3);
}
}
</script>
<style>
</style>
</head>
<body>
<button class="num" onclick="getval(0)">0</button>
<button class="num" onclick="getval(1)">1</button>
<button class="num" onclick="getval(2)">2</button>
<button class="num" onclick="getval(3)">3</button>
<hr>
Simple method - using attributes
<input type='button' onclick='setAllFunc1()' value='set all to "getval()"'/>
<input type='button' onclick='setAllFunc2()' value='set all to "getvalNew()"'/>
<hr>
Better method - using addEventListener
<input type='button' onclick='setAllFunc3()' value='set all to "myFunc3()"'/>
</body>
</html>
回答by Samuel Reid
function getval() {
........
var buttons = document.getElementsByClassName("num");
for (i=0;i<buttons.length;i++){
buttons[i].onclick = function(){
getvalNew();
}
}
}
And vice versa for the other function. At least, this should work....
反之亦然。至少，这应该有效......
回答by BeNdErR
you can do something like this:
你可以做这样的事情：
code
代码
$(".num").on("click", function () {
if ($(this).hasClass("getval")) {
$(this).removeClass("getval").addClass("getvalnew");
//do what you need here
alert("getVal");
} else {
$(this).removeClass("getvalnew").addClass("getval");
//do what you need here
alert("getValNew");
}
});
FIDDLE
小提琴
回答by vendettamit
You can do this with single liner JQuery syntax with your conditional statements when you want to change the function mapping.
当您想要更改函数映射时，您可以使用带有条件语句的单行 JQuery 语法来完成此操作。
//bind all
$('.num').bind('click', getValNew());
//Unbind all
$('.num').unbind('click');
回答by JoseTeixeira
In case the browser does not support getElementsByClassName, this is an alternative:
如果浏览器不支持 getElementsByClassName，这是一个替代方案：
var elems = document.getElementsByTagName('button');
for (i=0;i<elems.length;i++) {
if(elems[i].className == "num") {
elems[i].onclick = function(){
getvalNew();
}
}
回答by super
Maybe something like this:
也许是这样的：
.
.
var button = document.getElementsByClassName("num")
// You could also do: var button = document.getElementsByTagName("button")
function set() { // Change all the buttons onclick event to getvalNew
for (i = 0; i < button.length; i++) {
button[i].onclick = function() {
getvalNew(i)
}
}
}
function reset() { // Change all the buttons onclick event back to getval
for (i = 0; i < button.length; i++) {
button[i].onclick = function() {
getval(i)
}
}
}
