How to get input text from text edit

Question

I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:

<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>

The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:

var x = document.getElementById("sampleeditor").value;
    console.log(x);

It`s just loging - undefined, so how to target whatever is inside that div?

Does this answer your question? [How can get the text of a div tag using only javascript (no jQuery)](https://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — Prateek Chaubey, May 10 '21 at 14:55

score 1 · Answer 1 · answered May 10 '21 at 14:10

1

Divs do not have value properties, you have to use inner html

var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);

answered May 10 '21 at 14:10

Musa

96,336
17
118
137

score 0 · Answer 2 · answered May 10 '21 at 14:17

0

this is my solution

var x = document.getElementById("sampleeditor").innerText;
console.log(x);

answered May 10 '21 at 14:17

Ahmed Alhameli

63
7

score 0 · Answer 3 · answered May 10 '21 at 14:26

0

let x = document.querySelector(".editor");
console.log(x.textContent);

<div class="editor" id="sampleeditor" contenteditable="true">
  <b>BOLD</b>
    <div>
    <b>
      <i>ITALIC</i>
    </b>
  </div>
</div>

answered May 10 '21 at 14:26

David Öztürk

3,434
1
4
7

How to get input text from text edit

3 Answers3