イベントリスナーを追加javascriptのボタン

Question

チェックJSfiddle：https://jsfiddle.net/a7a0fa3g/ I次のコードを持っている：

var z = 1; 
function myFunction() { 
    var x = document.getElementById("inptext").value; 
    var y = document.getElementById("inpadress").value; 
    document.getElementById("tablename").innerHTML = document.getElementById("tablename").innerHTML + '<tr><td>' + x + '</td><td>' + y + '</td></tr>'; 
    var h = '<button style="margin-left:8px" class="edit" id=vda' + z + '>Edit</button>'; 
    var w = '<button style="margin-left:4px" class="deleteit" id=a' + z + '>Remove</button>'; 
    var f = '<div id=zzza'+z+' style=height:10px></div>'; 
    z = z + 1; 
    var total = h + w + f ; 
    document.getElementById("buttons").innerHTML = document.getElementById("buttons").innerHTML + total; 
} 

私は、z = Z + 1次のコードの前に追加してみました

：また

var id = 'vda'+z; 


document.getElementById(id).addEventListener('click', doSomething, false); 

：

function doSomething() { 
    alert('Button clicked'); 
} 

しかし、それは完全に機能していません。

Answer 1

addEventListernerはselect要素がnullの場合（htmlには存在しないため）、addEventListernerの前にボタン要素を追加してください。

var z = 1; 
myFunction(); 
function myFunction() { 
    var x = document.getElementById("inptext").value; 
    var y = document.getElementById("inpadress").value; 
    document.getElementById("tablename").innerHTML = document.getElementById("tablename").innerHTML + '<tr><td>' + x + '</td><td>' + y + '</td></tr>'; 
    var h = '<button style="margin-left:8px" class="edit" id="vda'+z+'">Edit</button>'; 
    var w = '<button style="margin-left:4px" class="deleteit" id="a' + z +'">Remove</button>'; 
    var f = '<div id=zzza'+z+' style=height:10px></div>'; 
    //add button first before event attach 
    var total = h + w + f ; 
    document.getElementById("buttons").innerHTML = document.getElementById("buttons").innerHTML + total; 
    var id = 'vda'+z; 
    document.getElementById(id).addEventListener('click', doSomething, false); 
    z = z + 1; 
} 

ノート のjs VAR 誤った

var h = '<button style="margin-left:8px" class="edit" id=vda' + z + '>Edit</button>'; 

正しい

var h = '<button style="margin-left:8px" class="edit" id="vda' + z + '">Edit</button>';