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.