在按钮上点击一个ID

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

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

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); 
 
    } 
 
    }

Answer 2

首先，您需要创建的元素添加到文档中，以便它会被添加到DOM。阅读tutorial。

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

    } 
} 

Answer 3

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); 
    } 
} 

Answer 4

你好像遇到了两个问题：

1. 您的for循环使用int声明循环变量i。在JavaScript中，您没有强大的输入功能，只需使用for (var i = 0; ...) {...}

2. 您创建的按钮元素存在于代码中，按钮尚未添加到文档本身。通常，需要将新元素附加到页面上已存在的父元素（如大多数内容所在的body元素）。

检出JS Bin下面的一个工作示例。在这个例子中，我已经指定了一个id为“btn-container”的元素作为父元素。

JS Bin with working example.