-2

我使用 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>
4

2 回答 2

0

问题是您的代码没有在 dom 就绪上运行

    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

于 2013-07-12T08:38:33.650 回答
0

问题不在于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);
    }
};
于 2013-07-12T08:39:05.877 回答