Im trying to make it so when the user double clicks an html element it turns into an input field.

At this point I want to capture and update the field to be what the user entered. My current code is producing an empty output. Im thinking its my last line of code causing the issue.

dktcell_1.addEventListener('dblclick', function () { //add double click event to cell 1 docket# with anonymous function
  dktcell_1.innerHTML = "<input id=samcel type=text>" // change html element to input field

  dktcell_1.addEventListener('keypress', function (e) {//nested keydown event added with e paremeter to access event object properties
    if (e.code === 'Enter') { //check if the user presses "enter"
      dktcell_1.innerHTML = dktcell_1.textContent; //capture value entered and update html element
    }
  })
})