Multiple textareas

How about something like this?

<textarea id="myTextarea">
342 Alvin Road

<textarea id="myTextarea2">
Value 2</textarea>

<p>Click the button to change the contents of the text area.</p>

<button type="button" onclick="myFunction()">Try it</button>

function myFunction() {
  document.getElementById("myTextarea").value = "Txt1";
  document.getElementById("myTextarea2").value = "Txt2";

Edit to match the use case in the comment

According to MDN, textarea does not have a value property.

When the page loads the default value for a textarea is whatever the value in between some value. Therefore when the user changes it we don’t have a way to find the original value.

To Overcome that we need somekind of a mechanism to store the default value

In your case if you have a lot of elements (Textareas), using a data attribute will help us to identify the default value after the page loads and the user changes the values

So use the following example

<textarea rows="1" cols="30" data-default="Default Val">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val1">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val2">Hello World</textarea><br/>

<button onclick="reset()">Reset</button>


            function reset() {
                var textareas = document.querySelectorAll('textarea');
                    for(i =0; i < textareas.length; ++i){
                        textareas[i].value = textareas[i].getAttribute('data-default');

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top