Javascript Append Textarea 值问题

Question

我创建了四个文本框，我想在单击提交按钮时获取它们的值。当我单击提交按钮时，我想 append 文本，它以纯文本形式写在提交按钮之后的文本区域中。我已尝试 createElement("p") 并 append 值，但它不起作用。这是我到目前为止所做的。谁能帮我找出问题所在？

谢谢。

HTML代码:

<div class="container">

  <div class="content-container">
    <label>First Content<label>
      <textarea id="fisrt-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Second Content<label>
      <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Third Content<label>
      <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>

      <div class="content-container">
        <label>Fourth Content<label>
      <textarea id="fourth-content" class="content-area" placeholder="Insert Content Here"></textarea>
      </div>


      <button id="c-btn">Submit</button>

      <div id ="c-content"></div> 

</div>

Javascript 代码:

var firstContent = document.getElementById("first-content");
var secondContent = document.getElementById("second-content");
var thirdContent = document.getElementById("third-content");
var fourthContent = document.getElementById("fourth-content");
var customContainer = document.getElementById("c-content");
var submitBtn = document.getElementById("c-btn");


function submitCustomForm() {

  var cElementOne = document.createElement("p");
cElementOne = firstContent.value;
customContainer.append(cElementOne);

  var cElementTwo = document.createElement("p");
cElementTwo = secondContent.value;
customContainer.append(cElementTwo);

  var cElementThree = document.createElement("p");
cElementThree = thirdContent.value;
customContainer.append(cElementThree);

  var cElementFour = document.createElement("p");
cElementFour = fourthContent.value;
customContainer.append(cElementFour);
}

submitBtn.addEventListener("click", submitCustomForm);

Answer 1

cElementOne = firstContent.value; - 这会重写您的变量

试试这段代码

var cElementOne = document.createElement("p");
cElementOne.innerText = firstContent.value;
customContainer.appendChild(cElementOne);