動的に作成された各ボタンの別のonclickメソッドを参照する方法はありますか？

Question

JSONデータを含むテーブルを作成するスクリプトがあります。各列の中には、2つのテキストと1つのボタンがあります。ボタンのonlickメソッドは、以前のテーブルの同じ行からの2つのテキストで満たされる他のHTMLページに移動する必要があります。 まず、別のボタンのonclickで異なるテキストをコンソールに出力しようとしています。ここでそれを行う必要がある作品だ：これはすべて正しいのidので正しくテーブルを作成しますが

for (var i in json) { 
var row = table.insertRow(0); 
var cel1 = row.insertCell(0); 
var cel2 = row.insertCell(1); 
var cel3 = row.insertCell(2); 
cel1.innerHTML = json[i].nome; 
cel2.innerHTML = json[i].idade; 
var b = document.createElement("BUTTON"); 
var idd = "id" + i; 
b.setAttribute("id", idd); 
var t = document.createTextNode("Loja"); 
b.appendChild(t); 
b.onclick = function(event) { 
    console.log(idd); 
} 
cel3.appendChild(b); 

は、すべてのボタンの押しは最後idd値を印刷し、IDボタンと一致していない1。誰かがこれを解決する方法またはそれを実装するより良い方法を知っていますか？

Answer 1

私が見ている主な問題は、変数iddを記録していることです。この変数は、forループの後に、そしてボタンをクリックするまでに静的な値を持ちます。

代わりにあなたは試してみてください：

b.onclick = function(event) { 
    console.log(this.id); 
} 

さらに1は、そのプロパティで属性を設定せずにIDを設定することができます。ここでは

b.id = idd; 

を簡単に可視化する例です。

for(var i=0, j=9; i<j; i++){ 
    var tB = document.body.appendChild(document.createElement('button')); 
    tB.id = tB.innerHTML = i; 
    tB.onclick = function(){ 
     console.log(i, this.id) //logs 9 (i is now statically 9) and the buttons id 
    } 
}