onclick - javascript click function not working on multiple buttons -

here javascript code. problem last create function working not other.for example here have 4 create() function last 1 working properly. if have 3 3rd 1 work fine not others........please suggest wrong code....please i'm new javasript.

please check code in codepen here

window.onload=function() { var number_operation_table=document.getelementbyid('number_operation_table');   create('lt','<'); create('gteq','>='); create('lteq','<='); create('gt','>');   function create(prefix,operator) {  number_operation_table.innerhtml+="<tr><td><input type='text' name='"+prefix+"_val1' id='"+prefix+"_val1'/>"+operator+"<input name='"+prefix+"_val2' type='text' id='"+prefix+"_val2'/></td>         <td><button id='check_"+prefix+"'>check</button></td>         <td id='"+prefix+"_result'></td>       </tr>";     eval("var "+prefix+"check=document.getelementbyid('check_"+prefix+"');"); console.log(eval(prefix+"check"));  console.log("button created name:"+prefix+"check") ;  eval(prefix+"check.onclick=function()  {    calculate(prefix,operator);     };");   }  function calculate(prefix,operator) { var val1=parseint((document.getelementbyid(prefix+'_val1')).value); var val2=parseint((document.getelementbyid(prefix+'_val2')).value); var result_div=document.getelementbyid(prefix+'_result');    if((eval(''+val1+ operator +val2))==false)   {  result_div.innerhtml="<span class='fail'>"+val1+ operator +val2 +" = false</span>";   }  if((eval(''+val1+ operator +val2))==true)   { result_div.innerhtml="<span class='success'>true</span>";    }   }    }; 

your problem (among others) when concatenate element using innerhtml destroy event listeners on contents of element. every time call create, code destroys created onclick handlers.

instead, try:

var newrow = document.createelement("tr"); newrow.innerhtml = "<td><input type='text' name='"+prefix+"_val1' id='"+prefix+"_val1'/>"+operator+"<input name='"+prefix+"_val2' type='text' id='"+prefix+"_val2'/></td>         <td><button id='check_"+prefix+"'>check</button></td>         <td id='"+prefix+"_result'></td>";  number_operation_table.appendchild( newrow); 

alternatively, have single event listener attached table instead of 1 each button

other issues:

you should not need 'eval' in create method @ all:

var mybutton = document.getelementbyid('check_"+prefix+"'); mybutton.onclick = function() { calculate( prefix, operator) }; 

you should need 1 test in calculate method:

if((eval(''+val1+ operator +val2))==false) {   result_div.innerhtml="<span class='fail'>"+val1+ operator +val2 +" = false</span>"; } else {    result_div.innerhtml="<span class='success'>true</span>"; }