CODEWITHSUNDEEP
javascriptappend
NoName84
NoName84

Reputation: 407

Javascript Append Textarea value issue

I have created four textarea boxes and I would like to get their values when I click the submit button. When I click the submit button I would like to append the text, that it was written in the textareas after the submit button as plain text. I have tried to createElement("p") and append the values but it's not working. Here is what I have done until now. Anyone can help me to find what the problem is?

Thanks.

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

Upvotes: 2

Views: 285

Answers (2)

sudeep patel
sudeep patel

Reputation: 31

Id if first text area is not correct as per your JavaScript code.

--Incorrect one fisrt-content

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

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

enjoy

Below is correct code working for me and also make sure to run it on google chrome first then try in other browsers, as seems addeventlister not supported by 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

Upvotes: 0

br3t
br3t

Reputation: 1658

cElementOne = firstContent.value; - this rewrites your variable

Try this code

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

Upvotes: 1

Related Questions