在Javascript中-為使用給定參數調用函數的按鈕設置onclick屬性

Question

我正在用Javascript制作紙牌游戲，網頁要做的一件事就是創建帶有您要使用的紙牌名稱的按鈕。 至少在理論上。

碼：

function addButton(card) {
    var newbutton = document.createElement("input");

    newbutton.setAttribute("type", button);
    newbutton.setAttribute("id", 'someButton');
    newbutton.setAttribute("value",card.displayName);
    newbutton.setAttribute("name",card.name);
    newbutton.setAttribute("onclick",'useCard(name)'); ///this is what's not working

我想要的是onclick屬性使用命名卡（卡的名稱為card.name，它可能與顯示的名稱不同）。 相反，它使用useCard以“ name”作為參數，這顯然是錯誤的。 這里正確的代碼行是什么？

Answer 1

添加事件監聽器將是一個更好，更干凈的選擇：

newbutton.addEventListener('click', function () {
  useCard(this.getAttribute("name"));
});

如果確實需要支持IE <9，則必須首先檢查addEventListener兼容性，並在不支持前者的情況下使用attachEvent ：

// generic helper function
function addEventListenerX(elem, evt, listener) {
  if ("addEventListener" in window) {
    elem.addEventListener(evt, listener);
  }
  else {
    elem.attachEvent("on" + evt, listener);
  }
}


addEventListenerX(newbutton, 'click', function () {
  useCard(this.getAttribute("name"));
});

如果您已經在使用jQuery或原型之類的JS框架，請​​使用其偵聽器系統。 他們會自動為您添加兼容性。

Answer 2

替換為：

newbutton.setAttribute("onclick",'useCard(name)'); ///this is what's not working

有了這個：

if (newbutton.addEventListener) {
    newbutton.addEventListener('click', function() { useCard( card.name ); });
else {
    newbutton.attachEvent('onclick', function() { useCard( card.name ); });
}

Answer 3

嘗試這個：

 newbutton.setAttribute("onclick",'useCard("' + card.name + '")');

Answer 4

用這個

 newbutton.setAttribute("onclick",'useCard('+card.name+')'); 

代替

 newbutton.setAttribute("onclick",'useCard(name)');