Javascript Append Textarea Wert Problem

Question

Ich habe vier Textfelder erstellt und ich möchte ihre Werte erhalten, wenn ich auf die Schaltfläche zum Absenden klicken. Wenn ich auf den Submit-Button klicke, möchte ich den Text, der nach dem Absenden als Text in die Textfelder geschrieben wurde, anhängen. Ich habe versucht, createElement("p") und fügen Sie die Werte, aber es funktioniert nicht. Hier ist, was ich bis jetzt gemacht habe. Kann mir jemand helfen, das Problem zu finden?

Danke.

HTML-Code:

<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-Code:

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; - das umschreibt Ihre Variable

Versuchen Sie diesen Code

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

Answer 2

Id, wenn der erste Text ein Rea ist nicht korrekt gemäß Ihrem JavaScript-Code.

--Incorrect ein fisrt-Inhalt

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

--Correct ID erster Inhalt <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>

genießen

Below richtigen Code für mich arbeiten und auch machen sicher, es auf Google Chrome zuerst dann in anderen Browsern versuchen, wie AddeventLister scheint nicht von Internet Explorer unterstützt 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>` 

Sudeep Patel