Question

我使用HTML5 + JS开发了一个移动网页。我动态地向网页添加了一个按钮。但是，当我向该按钮添加onclick功能时，它无效。

我的Html代码是;

<head><script>
var myarray = ['a','b','c','d','e','f'];
var arr = document.getElementById('content');

for(i=0;i<myarray.length;i++)
{
var table = document.createElement('table');
table.className = 'table';
var tr = document.createElement('tr');
var td = document.createElement('td');
        var Btn = document.createElement('input');
        Btn.type = 'button';
        Btn.className = 'Btn';
        Btn.value = 'VOTE';
        Btn.id = myarray[i];
        Btn.onclick = function(){
            alert("You have Selected" + " " + this.id);
        };
td.appendChild(Btn);
tr.appendChild(td);
table.appendChild(tr);
arr.appendChild(table);
}
</script>

<style>
.table { width:100%;height:70px;}
.Btn { margin-top:3px;border-radius:0;font-size:15px;height:30px;width:100px; color:#FFFFFF; margin-left:auto;margin-right:auto;display:block; }
</style></head>
<body><section id='content'></section></body>

Answer 1

问题是你的代码没有在dom ready上运行

    window.onload = function (){
        var myarray = ['a','b','c','d','e','f'];
        var arr = document.getElementById('content');

        for(i=0;i<myarray.length;i++)
        {
            var table = document.createElement('table');
            table.className = 'table';
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var Btn = document.createElement('input');
            Btn.type = 'button';
            Btn.className = 'Btn';
            Btn.value = 'VOTE';
            Btn.id = myarray[i];
            Btn.onclick = function(){
                alert("You have Selected" + " " + this.id);
            };
            td.appendChild(Btn);
            tr.appendChild(td);
            table.appendChild(tr);
            arr.appendChild(table);
        }
    }

演示：Plunker

Answer 2

这不是onclick问题。问题是你在加载/渲染之前试图获取#content元素。

解决方案是将代码包装在window.onload中，以确保代码只在页面中的元素加载并准备好使用时执行：

window.onload = function () {
    var myarray = ['a', 'b', 'c', 'd', 'e', 'f'];
    var arr = document.getElementById('content');

    for (i = 0; i < myarray.length; i++) {
        var table = document.createElement('table');
        table.className = 'table';
        var tr = document.createElement('tr');
        var td = document.createElement('td');
        var Btn = document.createElement('input');
        Btn.type = 'button';
        Btn.className = 'Btn';
        Btn.value = 'VOTE';
        Btn.id = myarray[i];
        Btn.onclick = function () {
            alert("You have Selected" + " " + this.id);
        };
        td.appendChild(Btn);
        tr.appendChild(td);
        table.appendChild(tr);
        arr.appendChild(table);
    }
};

用于动态添加按钮的onclick功能不起作用

2 个答案: