Javascript重复附加Textarea值问题

Question

我创建了一个包含四个textareas和一个提交按钮的表单。这种形式的原因是，当我按下提交按钮以附加我在div中的textareas中插入的值（文本）时。

当我按下提交按钮时，我可以看到我在四个textareas中插入的文本，但是当我再次按下提交按钮时，它将追加另外四个textareas，依此类推。

我想要发生的是每当我按下提交按钮以显示四个textareas（使用更新的文本）而不添加另外四个textareas。

＆＃13;

＆＃13;

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.innerHTML = firstContent.value;
  customContainer.append(cElementOne);

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

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

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

submitBtn.addEventListener("click", submitCustomForm);

＆＃13;

<div class="container">
  <form action="#" method="post" onsubmit="return false">
    <div class="content-container">
      <label>First Content
        <label>
          <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Second Content
        <label>
          <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Third Content
        <label>
          <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <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>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

每次调用submitCustomForm()，您都会创建新的p元素。所以你要插入新元素而不是更新旧元素。

您可以尝试这样的事情：

＆＃13;

＆＃13;

var customContainer = document.getElementById("c-content");
var submitBtn = document.getElementById("c-btn");
submitBtn.addEventListener("click", submitCustomForm);

var cElements = [null, null, null, null];
var cContents = [
        document.getElementById("first-content"),
        document.getElementById("second-content"),
        document.getElementById("third-content"),
        document.getElementById("fourth-content")
];

function getElement(no) {
    if (cElements[no]==null) {
        cElements[no] = document.createElement("p");
        customContainer.append(cElements[no]);
    }
    return cElements[no];
}

function submitCustomForm() {
    for (var i=0; i<4; i++) {
        var cElement = getElement(i);
        cElement.innerHTML = cContents[i].value;        
    }
}

＆＃13;

<div class="container">
  <form action="#" method="post" onsubmit="return false">
    <div class="content-container">
      <label>First Content
        <label>
          <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Second Content
        <label>
          <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Third Content
        <label>
          <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <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>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

var customContainer = document.getElementById("c-content");
var submitBtn = document.getElementById("c-btn");


function submitCustomForm() {
  //clear the content
  customContainer.innerHTML = "";
  var txtid = ["first", "second", "third", "fourth"];
  for (var i = 0; i < txtid.length; i++) {
    appendtxt("" + txtid[i] + "-content", customContainer);
  }

}

function appendtxt(content, parent) {
  var contentvalue = document.getElementById("" + content + "").value;
  if (contentvalue.length > 0) {
    var htmltxt = document.createElement("p");
    htmltxt.innerHTML = contentvalue;
    parent.append(htmltxt);

  }

}

submitBtn.addEventListener("click", submitCustomForm);

＆＃13;

<div class="container">
  <form action="#" method="post" onsubmit="return false">
    <div class="content-container">
      <label>First Content
        <label>
          <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Second Content
        <label>
          <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <div class="content-container">
      <label>Third Content
        <label>
          <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea>
    </div>
    <hr>
    <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>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;