如何使用javascript動態更改onclick按鈕的動作？動態使用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（），並再次重置呢？

來源

2013-06-24 Jack_of_All_Trades

如果不使用內聯事件處理程序，會更容易。有關事件處理的更多信息，請參閱http://www.quirksmode.org/js/introevents.html。 –

有關爲什麼不使用內聯事件處理程序的評論，請參閱@ FelixKling的評論，但如果必須，可以嘗試使用js更改元素的onclick屬性。我用純js有點生疏，但你可以嘗試像'jQuery（'button.num'）。attr（'onclick'，'myFunc（1）'）;'如果你要使用jQuery。 – jammypeach

帶有不同變量或數組或全局真假的簡單switch語句可以工作。你也可以點擊這個按鈕。並改變onclick attr爲相反的功能。 – abc123

這裏有一個方法，根據我blank.html模板。

注意：在setAllFunc3中，您可以附加幾個處理程序到一個元素。您也可以選擇性地刪除它們。查看關於getAllByClassName的另一個成員的註釋。

另請注意：通過附加處理程序，我們可以訪問this var。這意味着我們知道哪個元素觸發了該呼叫。我只是簡單地從按鈕中提取文本。您可以改爲獲取屬性的值，然後在處理程序中使用它。可能是你稍後發現的東西。 :)

<!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-24 14:34:16 enhzflep

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

反之亦然。至少，這應該工作....

來源

2013-06-24 14:16:30

你可以做這樣的事情：

代碼

$(".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

http://jsfiddle.net/ygqrU/

來源

2013-06-24 14:22:09 BeNdErR

你可以做這與您的條件狀態的單線程JQuery語法當你想改變功能映射時。

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

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

來源

2013-06-24 14:23:21 vendettamit

如果瀏覽器不支持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-24 14:23:37 JoseTeixeira

也許是這樣的：

。

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

來源

2013-06-25 07:25:29 super

動態使用javascript更改onclick按鈕的功能

回答

也許是這樣的：

相關問題