Multiple textareas

How about something like this?

Address:<br>
<textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>

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

<script>
function myFunction() {
  document.getElementById("myTextarea").value = "Txt1";
  document.getElementById("myTextarea2").value = "Txt2";
}
</script>

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>

<script>

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top