javascript [object HTMLParagraphElement] problem

Viewed 588

New To Javascript programming i want to get text from textarea and add in html paragraph tag but i got problem in html [object HTMLParagraphElement]

const textArea = document.querySelector("#textAreag");
const edit = document.querySelector(".buttonEdit");
var itemss = document.querySelector(".items");

function action() {
  let itemvalue = textArea.value;
  var addPTag = document.createElement("p");
  var pValue = document.createTextNode(itemvalue);
  addPTag.appendChild(pValue);
  console.log(addPTag);
  itemss.innerHTML = addPTag;
}
edit.addEventListener("click", action, false);
<!DOCTYPE html>
<html lang="en-US" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Online To Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <section class="MainHtmlHeading">
    <textarea id="textAreag" name="EditableArea" rows="2" cols="80"></textarea>
    <button class="buttonEdit" type="button" name="button">Edit</button>
  </section>

  <h1>To Do List</h1>
  <section class="items">

  </section>
</body>

</html>

1 Answers

Use appendChild to add the paragraph to the section. When you assign to innerHTML, the value should be a string of HTML, not a DOM element.

const textArea = document.querySelector("#textAreag");
const edit = document.querySelector(".buttonEdit");
var itemss = document.querySelector(".items");

function action() {
  let itemvalue = textArea.value;
  var addPTag = document.createElement("p");
  var pValue = document.createTextNode(itemvalue);
  addPTag.appendChild(pValue);
  console.log(addPTag);
  itemss.appendChild(addPTag);
}
edit.addEventListener("click", action, false);
<!DOCTYPE html>
<html lang="en-US" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Online To Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <section class="MainHtmlHeading">
    <textarea id="textAreag" name="EditableArea" rows="2" cols="80"></textarea>
    <button class="buttonEdit" type="button" name="button">Edit</button>
  </section>

  <h1>To Do List</h1>
  <section class="items">

  </section>
</body>

</html>

Related