How to save contenteditable input to a variable so I can print it on screen-CodePudding

I have this code and I want to save a contenteditable text to a variable so i can print it on screen. HTML:

    <input type="button" value="save edits" onclick="saveEdits()"/>
    <p id="update"></p>```

and JS:

```function saveEdits() {
    //get the editable element
    var editElem = document.getElementById("myText").value;
    document.getElementById("update").innerHTML=editElem;
    //write a confirmation to the user
  }```

Thank you for your time.

CodePudding user response：

I'd try using innerHTML:

function saveEdits() {
    //get the editable element
    document.getElementById("update").innerHTML = document.getElementById("myText").innerHTML;
    //write a confirmation to the user
}

CodePudding user response：

From what I understand you want this :

function saveEdits() {
    //get the editable element
    var editElem = document.getElementById("myText").value;
    document.getElementById("update").innerHTML=editElem;
    //write a confirmation to the user
    alert("your text have been saved");
  }

<input type="text" placeholder="type content here" id="myText">
<input type="button" value="save edits" onclick="saveEdits()"/>
    <p id="update"></p>

The text is stocked in the editElem variable.

CodePudding user response：

Just change .value to .innerHTML .

function saveEdits() {
//get the editable element
var editElem = document.getElementById("myText").innerHTML;
document.getElementById("update").innerHTML=editElem;
//write a confirmation to the user
  }

<h1 id="myText" contenteditable="true">Title</h1>
    <input type="button" value="save edits" onclick="saveEdits()"/>
    <p id="update"></p>