Add event listener javascript button

Question

Check JSfiddle: https://jsfiddle.net/a7a0fa3g/ I have the following code:

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

I tried adding before z = z + 1 the following code:

var id = 'vda'+z;


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

also:

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

But it is not working altogether.

Answer 1

addEventListerner is not work when select element is null (no exist in html) ,so add your button element first before 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; 
}

note You need to "" when assign id with js var Incorrect

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

Correct

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