Javascript Append Textarea 值问题

Question

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

谢谢。

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);

Answer 2

如果第一个文本区域根据您的 JavaScript 代码不正确，则 ID。

--不正确的一个第一个内容

textarea id="**fisrt**-content" class="content-area" placeholder="Insert Content Here"></textarea>

--正确的ID first-content <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>

享受

以下是对我有用的正确代码，并确保首先在 google chrome 上运行它，然后在其他浏览器中尝试，似乎 Internet Explorer 不支持 addeventlister：

HTML

 ` <div class="content-container">
    <label>First Content<label>
      <textarea id="first-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" name="c-btn">Submit</button>

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

   </div>`


`<script type="text/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 = firstContent.value;
    customContainer.append(cElementTwo);

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

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

    submitBtn.addEventListener("click", submitCustomForm);
    </script>`

苏迪普·帕特尔