Javascript追加Textarea值問題

Question

我創建了四個textarea框，我希望在點擊提交按鈕時獲取它們的值。當我點擊提交按鈕時，我想追加文本，它是在提交按鈕之後的textareas中以純文本形式寫入的。我試圖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

的ID，當第一文本根據您的JavaScript代碼，rea是不正確的。

--Incorrect一個最前一頁內容

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

--Correct ID的第一內容 <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>

享受

下面是爲我工作正確的代碼，也使確定先在谷歌瀏覽器上運行它，然後在其他瀏覽器中嘗試，如addeventlister不支持Internet Explorer ER：

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

薩迪普帕特爾