要将onclick事件分配给多个按钮

Question

我正在研究根据用户输入生成多个按钮的代码

    for(var loop = 0; loop < up.length ; loop++){
document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" </button>');

}

但是我希望每个按钮都具有相同的onclick函数，但是如果我像下面这样使用，该函数将不会执行。 有什么问题，我哪里出问题了？ 请帮忙。

document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick= "myfn()" </button>');

Answer 1

错别字，您没有关闭开始标签：

 document.write('<button style="background-color:'+ up[loop] +';width:100;height:100" onclick="myfn()"></button>');

始终确保使用W3c标记验证服务进行验证： http : //validator.w3.org

您还应该毫不客气地附加事件处理程序，内联编写处理程序并不理想。

Answer 2

1. 使用jQuery
2. 向按钮添加一个类（总是相同的类）
3. 用户jQuery的click方法来处理单击

$（'。class-name）.click（function（）{alert（“ click”）;}）;

Answer 3

像这样的事情呢（不需要jQuery，也没有document.write）：

var button;
for (i=0; i<5; i++) {
    button = document.createElement('button');
    button.innerHTML = "button - " + i;
    button.addEventListener('click', myFn);
    document.body.appendChild(button);
}


function myFn() {
    alert('button clicked');
}

看到这里： http : //jsfiddle.net/yNFqy/1/