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

使用jQuery
向按钮添加一个类（始终是同一个类）
用户jQuery的点击方法来处理点击

$（'。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/

将onclick事件分配给多个按钮

3 个答案: