Question

我正在尝试在循环内动态创建按钮。点击按钮，我想获取按钮的ID。以下代码无效。谁能帮帮我吗。

 for(int i=1;i<5;i++)
    {
    var btn = document.createElement("button");
    btn.innerText = "button"+i;
    btn.setAttribute("id", i);
    btn.onclick = function(this){
    alert(this.id);
    }
    }

提前致谢

Answer 1

首先需要将创建的元素添加到文档中，以便将其添加到DOM中。阅读此tutorial。

var checkCountOfUsers = Q.nfbind(_checkCountOfUsers), // assuming it actually uses nodebacks
    seedUsers = Q.nfbind(_seedUsersInDb);

function seedDb() {
    return checkCountOfUsers().then(function(count){
        if (count == 0) {
            return seedUsers();
        }
    });
}

Answer 2

你必须追加孩子。你不能在这里使用int。使用var

＆＃13;

for(var i=1;i<5;i++)
    {
    var btn = document.createElement("button");
    
    btn.innerText = ("button"+i);
    btn.setAttribute("id", i);
      document.body.appendChild(btn); // add this line 
    btn.onclick = function(){
    alert(this.id);
    }
  }

＆＃13;

Answer 3

您似乎遇到了两个问题：

你for循环使用int来声明循环变量i。在javascript中，您没有强力打字，只需使用for (var i = 0; ...) {...}
您创建的按钮元素存在于代码中，按钮尚未添加到文档本身。通常，新元素需要附加到页面上已存在的父元素（例如大多数内容所在的body元素）。

使用一个工作示例查看下面的JS Bin。在这个例子中，我已经指定了一个id为＆＃34; btn-container＆＃34;的元素。作为父元素。

JS Bin with working example.

Answer 4

for(var i = 1; i < 5; i++)
{
    var btn = document.createElement("button");
    btn.innerText = "button"+i;
    btn.setAttribute("id", i);
    btn.onclick = function(e) {
        alert(this.id);
    }
}

点击按钮获取ID

4 个答案: