onclick - Javascript change plain text with input -

i want replace contents of clicked "td" element input data , button element.

when click "td" containing plain text, want swap plain text input (from elsewhere) , button. when button clicked input , button should replaced plaintext of input.

here link: https://jsfiddle.net/a2y9s424/1/

note: need using javascript, not jquery

function edit(td){    if(isedit==0)  {      data=td.value;     isedit=1; satir=td.getattribute("satir"); sutun=td.getattribute("sutun");   ilkdeger=td.innerhtml;   myinput=document.createelement("input"); td.appendchild(myinput); myinput.focus();   kaydet=document.createelement("input"); kaydet.type="button";  vazgec=document.createelement("input"); vazgec.type="button";  kaydet.value="kaydet";   vazgec.value="vazgeç";  td.appendchild(kaydet);   td.appendchild(vazgec);     }   myinput.addeventlistener("onblur",function(){     blur=1; });  vazgec.addeventlistener("click",function(){          td.innerhtml=ilkdeger;         td.removechild(kaydet);          isedit=0;         return  false;    });  kaydet.addeventlistener("click",function(){     console.log("dsa");     td.value="myinput.value;";   });   } 

here's different approach.

---

attach single click handler table instead of each cell. can using onclick within html, it's preferable keep javascript , html separate:

document.queryselector('table').addeventlistener('click', function(evt) {   ... } 

---

within handler, determine clicked using event.target:

var o= evt.target; 

---

test if td clicked this:

if(o.tagname==='td') {   ... } 

note element.tagname in uppercase.

---

if td clicked, save innerhtml attribute, , replace innerhtml input, save button, , cancel button. set focus on input:

if(o.tagname==='td') {   o.setattribute('value', o.innerhtml);   o.innerhtml= '<input type="text" value="'+o.innerhtml+'">' +                '<button class="save"  >save  </button>' +                '<button class="cancel">cancel</button>';    o.queryselector('input').focus(); } 

note assigned classes (save , cancel) buttons.

---

need logic buttons, add table's click handler:

else if(o.classname==='save') {   o.parentnode.innerhtml= o.parentnode.queryselector('input').value; } else if(o.classname==='cancel') {   o.parentnode.innerhtml= o.parentnode.getattribute('value'); } 

---

putting together:

document.queryselector('table').addeventlistener('click', function(evt) {   var o= evt.target;    if(o.tagname==='td') {     o.setattribute('value', o.innerhtml);     o.innerhtml= '<input type="text" value="'+o.innerhtml+'">' +                  '<button class="save"  >save  </button>' +                  '<button class="cancel">cancel</button>';      o.queryselector('input').focus();   }   else if(o.classname==='save') {     o.parentnode.innerhtml= o.parentnode.queryselector('input').value;   }   else if(o.classname==='cancel') {     o.parentnode.innerhtml= o.parentnode.getattribute('value');   } }); 

---

note there no local variables. also, there's no need use createelement or appendchild, because that's handled using innerhtml.

working fiddle