добавляется новый элемент в html, но вместо текста выходит ошибка

Question

Я создаю приложение для заметок и необходима функция добавления заметки. Для ввода текста есть тег textarea.Отсюда я беру введенный текст и вставляю в новый созданный тег p

function add_note() {
  var section = document.getElementById("all_notes");
  var textarea = document.querySelector('textarea');

  var save_note = document.createElement("div");
  save_note.className = "note";

  section.appendChild(save_note);

  var text_of_note = document.createElement("p");
  text_of_note.className = "text_of_note";

  var text_for_text = document.createTextNode(textarea);

  save_note.appendChild(text_of_note);
  text_of_note.appendChild(text_for_text);
}

<section class="create_note">
  <div class="box">
    <p>Ввод текста</p>
    <textarea></textarea>
    <p>Добавить дату</p>
    <input type="date">
    <div class="button">
      <div class="add-btn" onclick="add_note();">Добавить Заметку</div>
    </div>
  </div>
</section>
<section class="notes_lists" id="all_notes">
  <!--Вот туда и добавляется новая заметка-->
</section>

Элементы добавляются, но на экран выводится не введенный текст, а [object HTMLTextAreaElement]. Наверное я не правильно что-то делаю с querySelector.

Answer 1

Не знаю насколько это приветствуется. Но мне проще и короче так делать.

function add_note() {
  let section = document.getElementById("all_notes");
  let textarea = document.querySelector('textarea');
  let html = `<div class="note"><p class="text_of_note">${textarea.value}</p></div>`;     
  section.innerHTML = section.innerHTML+html;
}

<section class="create_note">
  <div class="box">
    <p>Ввод текста</p>
    <textarea></textarea>
    <p>Добавить дату</p>
    <input type="date">
    <div class="button">
      <div class="add-btn" onclick="add_note();">Добавить Заметку</div>
    </div>
  </div>
</section>
<section class="notes_lists" id="all_notes">  
</section>

БЛОГ НА HUSL

добавляется новый элемент в html, но вместо текста выходит ошибка

Ответы (1 шт):