Textarea Should Get Copy To Another Textarea And Original Textarea Should Be Cleared On A Button Click Using Javascript

I have the following code. It displays two textareas where the text from one textarea gets copied to another textarea on a button click using JavaScript I want to accomplish the

Solution 1:

Try this. You seemed to have declared EraseText as a function but not actually called it. Adding the "\n" gives the line breaks in text2.

function displayOut(){
  var input=document.getElementById("txt").value;
  if(input.length===0)
  {
      alert("Please enter a valid input");
      return;
  }

  var text2=document.getElementById("txt1");
  text2.value += input+"\n";
  eraseText();
  
}
  function eraseText() {
      document.getElementById("txt").value = "";
  }

<textarea id="txt1" rows="10" cols="100" readonly="readonly" ></textarea>
<textarea id="txt" rows="4" cols="50"  onclick="eraseText()"></textarea><input type="button" onclick="displayOut()" value="click">

Solution 2:

1)on a button click the text should get copied to another textarea and the text from origial textare ie. first textarea should get clear to accept the another text, so i hv use erase function bt it doesn't work and second is that

2) and i want to display that the text should gets copied in second textarea in a continuous format one below the other on a button click.

try the below code

<textarea id="txt1" rows="10" cols="10" readonly="readonly" ></textarea>
<textarea id="txt" rows="4" cols="10"  onclick="eraseText()"></textarea>    <input type="button" onclick="displayOut()" value="click">
<script >

function displayOut(){
var input=document.getElementById("txt").value;
var text2=document.getElementById("txt1");

if(input.length===0)
{
    alert("Please enter a valid input");
    return;
}
  else
text2.value+=input+'\n';
eraseText();

}
function eraseText() 
document.getElementById("txt").value = "";
}
</script>

fiddle -->http://jsfiddle.net/santoshj/m740vwet/1/