javascript innertext of textarea doesn't reset realoading page

Question

I have the following code that works perfectly when I load the page

it allows to double click a P and make it editable with textarea and revert it back to P when clicking the Save button

Double clicking the "some lorem ipsum" string will switch the P to a texarea which the content is taken from the P content so it will display "some lorem ipsum"

You make some edit , let say you delete the "some lorem ipsum" and you now write "new content edited",

when you click Save it turns back to showing the P which new content is now "new content edited"

The issue that I'm experiencing is that if I click the reload button in Firefox,

the P goes back to the original content "some lorem ipsum"

but if I doubleclick the "some lorem ipsum" string, the textarea text IS NOT PICKED from the P

instead it shows the previous "new content edited"

Am I forgetting something? Thank you for hinting

var noteP = document.getElementById("noteP");
var noteTA = document.getElementById("noteTA");
var noteDD = document.getElementById("noteDD");
var noteED = document.getElementById("noteED");

var TestoOriginale = "";
var TestoAttuale = "";

noteED.style.display = "none";

noteP.ondblclick = function LoadText() {
  TestoOriginale = noteP.innerText;  // load the P text
  noteTA.innerText = TestoOriginale; // -THE ERROR IS HERE- write the P text into the textarea
  noteDD.style.display = "none"; // hide P DIV
  noteED.style.display = "block"; // show text area DIV
}


function UpdateText() {
  TestoAttuale = noteTA.value; // get current textarea text
  noteP.innerText = TestoAttuale; // write it into P
  noteDD.style.display = "block";
  noteED.style.display = "none";

}


document.getElementById("salvaBT").onclick = function AJAXPost(NoteUpdateForm) {

  UpdateText();

  /**
  more code later
  **/
}

<div id="noteDD">
  <p id="noteP">some lorem ipsum</span>.</p>
</div>

<div id="noteED">
  <form action="./note-update.php" method="post" id="NoteUpdateForm">
    <textarea id="noteTA" name="NoteUpdateText" form="NoteUpdateForm" rows="5" cols="40"></textarea><br>
  </form>
  <input type="button" value="Cancel"><input type="button" id="salvaBT" value="Save" onclick="javascript:AJAXPost(this);">
</div>

Lawman

I don't get it ... For the initial value on the textarea you're taking the text inside the <p> right ? You're telling that even after a refresh you still get the edited text ? – Baten

@Baten the issue has been fixed, but there is the code snippet to check it in action. On a real page, after a reload, the textarea was showing the older edited content – Lawman

Answer 1

As I understood, after the event you want to update textarea value after saving the changes.

You need to pass value to textarea to save the modification.

instead of doing

noteTA.innerText = TestoOriginale;

do:

noteTA.value = TestoOriginale;

When you use innerText you put text inside the <textarea> HTML selector instead of puting it into the textarea value attribute.

Phenolic

OUCH! you are right I was correctly using .value in one line and not in the other. Though I don't understand why with a page reload it keeps the old value (?!?) – Lawman

I am happy that I could help :) Have a great code time! – Phenolic

P.S. do you know how to make the double click to work on a smartphone? Double click makes the zoom instead to open the textarea – Lawman

It is this that makes really easy the trick --> https://mcmap.net/q/461162/-jquery-on-39-double-click-39-event-dblclick-for-mobile, no need of additional javascript, the page works as it is – Lawman