NoName84 NoName84 - 21 days ago 9
Javascript Question

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

Answer

cElementOne = firstContent.value; - this rewrites your variable

Try this code

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