3

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

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

}

ボタンを getval() から getvalNew() に切り替えて再度リセットするにはどうすればよいですか?

4

6 に答える 6

3

blank.htmlこれが私のテンプレートに基づくアプローチです。

注: setAllFunc3 では、複数のハンドラーを 1 つの要素にアタッチできます。それらを選択的に削除することもできます。getAllByClassName に関する別のメンバーのメモを参照してください。

また、注意: ハンドラーをアタッチすることで、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>
于 2013-06-24T14:34:16.560 に答える
2

関数のマッピングを変更する場合は、条件文を含むシングル ライナー JQuery 構文を使用してこれを行うことができます。

//bind all
$('.num').bind('click', getValNew());

//Unbind all
$('.num').unbind('click');
于 2013-06-24T14:23:21.653 に答える
1

ブラウザが getElementsByClassName をサポートしていない場合は、これが代替手段です。 

var elems = document.getElementsByTagName('button');
for (i=0;i<elems.length;i++) {
    if(elems[i].className == "num") {
        elems[i].onclick = function(){
        getvalNew();
    }
}
于 2013-06-24T14:23:37.507 に答える