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?

2 thoughts on “Popup window has strange text”

  1. I was checking your code and I’m not sure what’s the objective, but made some changes to it:

    const textAreaId = "editBox";
    const textEditor = "TextEditor";
    var editorOpened = false;
    var activeCell = "text1";
    
    function editText(textID) {
      // You change the cell id to update it later
      activeCell = textID;
      // Get the text from the cell
      const currentText = document.getElementById(textID).innerHTML || "";
      // Set the current text to the textarea
      document.getElementById(textAreaId).value = currentText;
      // Show the textarea to update the cell
      toggleHide("TextEditor");
    }
    
    function toggleHide() {
      editorOpened = !editorOpened;
      document.getElementById(textEditor).style.display = editorOpened
        ? "block"
        : "none";
    }
    
    function updateTableCell() {
      const inputText = document.getElementById(textAreaId).value;
      document.getElementById(activeCell).innerHTML = inputText;
    }
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <style type="text/css">
          #testTable td {
            width: 50px;
            height: 50px;
            border: black solid 1px;
            cursor: pointer;
          }
          #TextEditor {
            width: 200px;
            height: 100px;
            background-color: blue;
            display: none;
            left: 300px;
            margin-top: 30px;
          }
          #editBox {
            width: 95%;
            height: 95%;
          }
        </style>
      </head>
      <body>
        <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"
            onkeyup="updateTableCell()"
          ></textarea>
          <input type="button" value="Close" onclick="toggleHide()" />
        </div>
        <script src="PageTest.js" type="text/javascript"></script>
      </body>
    </html>

    You can check it out if you want and let me know if you need any help.

    Reply
  2. The solution is to use .value for textarea instead of .innerHTML because it is a form element. I tested it and it does solve the problem. Your javascript then becomes.

    function editText(textID) {
      var cText = document.getElementById(textID).innerHTML;
      document.getElementById('editBox').value = cText; // <<<< VALUE!!
      toggleHide('TextEditor');
    }
    
    function toggleHide(id) {
      var x = document.getElementById(id);
      x.style.display = x.style.display === "none" ? "block" : "none";
    }
    

    There are lots of other problems with this code, like the toggle, but this does solve the issue you had a problem with.

    I found the solution here.

    Reply

Leave a Comment