Popup window has strange text

Question

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?

score 0 · Accepted Answer · answered Feb 19 '21 at 22:45

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.

Will Maradiaga · Answer 2 · 2021-02-19T22:57:40.790

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.

score 0 · Answer 3 · edited Feb 19 '21 at 23:33

I also tried to find a solution to your problem and changed some things on your code:

//I made the variables global to be able to get both elements on both functions
var cText = document.getElementById("text2");
var text = document.getElementById('editBox');

//On this function it gets the text on the table cell and put it on the editBox
function editText(){
    text.innerText = cText.innerText
    toggleHide('TextEditor');
   }

//On this function when the cancel button is clicked the table cell receives the value on the 'editBox'
function toggleHide(id) {
    var x = document.getElementById(id);
     x.style.display = x.style.display === "none" ? "block" : "none";

     cText.innerText = text.value
}

Popup window has strange text

3 Answers3