使用javascript动态更改按钮的onclick函数_Javascript_Html

使用javascript动态更改按钮的onclick函数

javascript html

使用javascript动态更改按钮的onclick函数,javascript,html,Javascript,Html,如何使用javascript动态更改按钮的onclick行为我的意思是：我有以下按钮： <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 cla

如何使用javascript动态更改按钮的onclick行为

我的意思是：

我有以下按钮：

<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(){

..............

}

0
1.
2.
3.
函数getval（）{
...............
}
函数getvalNew（）{
..............
}

如何使按钮从getval（）切换到getvalNew（）并再次重置它？

函数getval（）{
function getval() {
    ........
    var buttons = document.getElementsByClassName("num");
    for (i=0;i<buttons.length;i++){
        buttons[i].onclick = function(){
            getvalNew();
        }
    }
}

........
var buttons=document.getElementsByClassName（“num”）；
对于（i=0；i你可以这样做：
代码
$(".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");
    }
});

小提琴
当您想要更改函数映射时，可以使用单行JQuery语法和条件语句来实现这一点
//bind all
$('.num').bind('click', getValNew());

//Unbind all
$('.num').unbind('click');

如果浏览器不支持GetElementsByCassName，这是一种替代方法：
var elems = document.getElementsByTagName('button');
for (i=0;i<elems.length;i++) {
    if(elems[i].className == "num") {
        elems[i].onclick = function(){
        getvalNew();
    }
}

var elems=document.getElementsByTagName（'button'）；
对于（i=0；i这里有一种方法，基于我的blank.html
模板
注意：在setAllFunc3中，您可以将多个处理程序附加到一个元素。您也可以有选择地删除它们。
请参阅其他成员关于getAllByClassName的说明
还要注意：通过附加处理程序，我们可以访问this变量。这意味着我们知道是哪个元素触发了调用。我只是从按钮中提取了文本。您可以获取属性的值，然后在处理程序中使用。
可能是您稍后会发现的东西。：）

函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（元素，newStr）
{
index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
其他的
{
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
}
函数forEachNode（节点列表，func）
{
变量i，n=节点列表长度；
对于（i=0；i可能是这样的：

var button=document.getElementsByClassName（“num”）
//您也可以这样做：var button=document.getElementsByTagName（“按钮”）
函数集（）{//将单击事件的所有按钮更改为getvalNew
对于（i=0；i
如果不使用内联事件处理程序，会更容易。有关事件处理的更多信息，请参阅。关于为什么不使用内联事件处理程序，请参阅@FelixKling的评论，但如果必须，可以尝试使用js更改元素的onclick属性。我对纯js有点生疏，但可以尝试类似jQuery的方法（'button.num'）.attr（'onclick'，'myFunc（1）；如果要使用jQuery。使用不同变量或数组或全局true False的简单switch语句也可以。您也可以只需onclick执行此操作。并将onclick attr更改为相反的函数。
<!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>

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