Popup window has strange text

I have a table with 2 cells; one has data the other doesn’t. I want to give users a way to edit that data via a hidden div, "TextEditor".

function editText(textID) {
  var cText = document.getElementById(textID).innerHTML;
  document.getElementById('editBox').innerHTML = cText;
  toggleHide('TextEditor');
}

function toggleHide(id) {
  var x = document.getElementById(id);
  x.style.display = x.style.display === "none" ? "block" : "none";
}
#testTable td {
  width: 50px;
  height: 50px;
  border: black solid 1px;
}

#TextEditor {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
  left: 300px;
  margin-top: 30px;
}

#editBox {
  width: 95%;
  height: 95%;
}
<table id="testTable" border="1px">
  <tr>
    <th>Note 1</th>
    <th>Note 2</th>
  </tr>
  <tr>
    <td onclick="editText('text1')">
      <div id="text1"></div>
    </td>
    <td onclick="editText('text2')">
      <div id="text2">abcdefghijk</div>
    </td>
  </tr>
</table>
<div id="TextEditor">
  <textarea id="editBox" name="editBox"></textarea>
  <input type="button" value="Cancel" onclick="toggleHide('TextEditor')" />
</div>

Clicking inside a table cell shows the TextEditor div with the cell’s text in it ready for editing. Try clicking the 2nd cell to see that.

Click Cancel to close the 1st popup, the click in the 1st cell. Type some gibberish like, "adsadg" and then click Cancel. Now click cell #2 – the one with the text and the text is lost but the gibberish shows. Stepping thru the code shows the cell 2’s text is clearly retrieved and saved but only the gibberish shows. What am I doing wrong?

95 thoughts on “Popup window has strange text”