Set Value of Textarea JavaScript

We use the textarea element to get text input from users. You might think why we can’t use <input> tag instead of using <textarea>, but we cannot get large text (multiple lines) data input from users in <input> tag. So we can use an input tag to get name, email, phone number, passwords etc as input and we need to use textarea to get comments, address, content posts etc as input. We can also set the value of a textarea element dynamically using JavaScript but not using HTML. For example, we cannot use HTML to display some value in a text area when a button is clicked. So, in this article, we will see how to set a value of textarea in javascript.

Creating simple textarea

Before diving into the set value of textarea, let’s quickly review textarea in JavaScript. We can create a textarea box using <textarea> element. The <textarea> is paired tag so we need to create opening and closing tags. By default, the textarea box is resizable, which means we can able change the width and height of the box. If we give any values ​​inside this tag it will display inside textarea box.

Example:

<textarea>Your text here... </textarea>

You may think that we can set textarea value directly ​​using HTML. Yes you can, but you cannot set dynamic values. Apart from being able to set dynamic values ​​using JavaScript, we can perform a lot of operations in JS.

How to set the value of textarea?

1. Setting ID name

First, you must set the ID name to the <textarea> tag. Because we’ll use that ID name to set the value in Javascript. You can put whatever ID name you want, here I put “myTextarea”.

<textarea id="myTextarea"></textarea>

2. Selecting the Textarea Element

To set the value of a textarea, we need to obtain a reference to the corresponding textarea element in the HTML document. We can use one of JavaScript’s DOM (Document Object Model) Methods called “getElementById” to retrieve the textarea tag.

var sample = document.getElementById("myTextarea");

Here we pass the textarea ID name to the method “document.getElementById()” and select the specified textarea and assign it to the variable “sample”.

3. 3 ways to set the value of textarea

1. After selecting the textarea element, you can manipulate its ‘value‘ property to set the desired text, like :

   sample.value = "This is the new text.";

2. Alternatively, you can modify your text area’s value by using the’innerHTML‘ method.

   sample.innerHTML = "This is the new text.";

   However, I don’t recommend doing this method because the ‘innerHTML‘ is mainly used to manipulate the HTML content inside the element.

3. And the final method is “innerText” property. This method represents the visible text content of the textarea. Here’s an example:

   sample.innerText = "This is the new text.";

How to break the line?

If you want to break the line, you need to use a newline character ("\n"). When setting the value of a textarea, it’s important to handle line breaks appropriately.

sample.value = "First line\nSecond line\nThird line";

How to set the value of the textarea dynamically?

In many cases, you may want to dynamically update a textarea value. We can set the value based on user interactions or other events. In this part, we’re going to display some value in a textarea when a button is clicked, like:

HTML:

<textarea id="myTextarea"></textarea>
<button id="myButton"></button>

JS:

var myTextarea = document.getElementById("myButton");
var myButton = document.getElementById("myTextarea");

myButton.addEventListener("click", function() {
  myTextarea.value = "New text after button click.";
});

Live preview:

Explanation:

1. In this above HTML example, we have created a <textarea> and <button> tag with ID names.
2. Then in the JS code, we selected the textarea and button tags by passing the id name in “document.getElementById()” and stored it in a separate variable.
3. Finally, we use a callback function called addEventListener() for the button. Inside this, we need to pass two parameters: First of all the action should be performed when the users do it and second what should be performed inside the function. Here we have said that, if the users click on the button, the value should be added to the text area.

Conclusion

So, we can use the value, innerHTML, or innerText properties to update the content programmatically.