To get the value of textarea element in JavaScript, use the ‘value’ property, like this:
var textareaValue = document.getElementById(“myTextArea”).value;
The ‘value’ property can be used on all form elements including textarea. It can even be used to set or append the textarea value (i.e. to make it empty).
How To Get The Value Of textarea Element In JavaScript
First we need to create a textarea element in our HTML document. We can do this by using the <textarea> tag:
<html>
<textarea id="myTextarea">This is my text area</textarea>
<script>
var myTextarea = document.getElementById("myTextarea");
console.log(myTextarea.value); // This is my text area
</script>
</html>In the above code, we first create a <textarea> element with an id of “myTextarea”. We then use the getElementById() method to find our textarea element. Finally, we use the value property to get and log the value of our textarea to the console.
You can even change or append text to your textarea by using the value property.
Here is how to change the value of textarea :
<textarea id="myTextarea">This is my text area</textarea><script>
var myTextarea = document.getElementById("myTextarea");
myTextarea.value = "This is my new text area";
console.log(myTextarea.value); // This is my new text area
</script>And here is how to append text to your textarea:
<html>
<textarea id="myTextarea">This is my text area</textarea>
<script>
var myTextarea = document.getElementById("myTextarea");
myTextarea.value += " some more text"; // This is my text area some more text
</script>
</html>In the above code, we simply append some more text to our textarea using the += operator.
How To Get textarea Value On Change In JavaScript
If you want to get the value of textarea when the user changes the value, use the input event handler, like this:
<html>
<textarea id="myTextarea">This is my text area</textarea>
<script>
var myTextarea = document.getElementById("myTextarea");
myTextarea.addEventListener("input", function(e){
console.log(this.value);
});
</script>
</html>In the above code, we use the input event handler to log the value of our textarea to the console whenever the user changes the value.
You can also use the change event handler, like this:
<html>
<textarea id="myTextarea">This is my text area</textarea>
<script>
var myTextarea = document.getElementById("myTextarea");
myTextarea.addEventListener("change", function(e){
console.log(this.value);
});
</script>
</html>The difference between the input and change event handlers is that the input event handler is triggered for every change to the textarea value, while the change event handler is only triggered when the textarea loses focus.
As you can see, getting the value of a textarea in JavaScript is quite simple. Just use the ‘value’ property and you’re good to go!
Conclusion
In this article, we learned how to get the value of a textarea element in JavaScript. We also learned how to use the input and change event handlers to get the value of a textarea when the user changes the value.
I hope this article was helpful! 🙂