附加Textarea值问题

Javascript Append Textarea value issue

本文关键字：问题 Textarea 附加      更新时间：2023-09-26

我已经创建了四个文本区域框，我想在单击提交按钮时获得它们的值。当我单击提交按钮时，我想要附加文本，这是在提交按钮后的文本区域中以纯文本形式编写的。我试过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);

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

试试这个代码

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

如果第一个文本区域不正确，

——错误的一个 fisrt-content

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>

享受

下面是正确的代码为我工作，也要确保在谷歌chrome上运行它，然后在其他浏览器中尝试，因为似乎addeventlister不支持internet explorer:

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>`

Sudeep Patel

相关文章：