Skip to main content

How to Get and Set the Value of a Textarea in JavaScript

Working with form controls is a fundamental part of web development, and the <textarea> element is a key component for multi-line user input. To interact with a textarea's content, you need to know how to programmatically read from it and write to it. The standard and most direct way to do this is with the .value property.

This guide will teach you how to use the .value property to get, set, and clear the content of a textarea. You will also learn how to listen for changes in real-time and understand the important distinction between .value and other properties like .textContent.

The Core Property: textarea.value​

The HTMLTextAreaElement.value property is a string that represents the current text content of the textarea. It is the single, authoritative source for the user's input and is used for both reading and writing.

HTML for Examples:

<textarea id="my-textarea" rows="5">Default text content</textarea>

How to Get the Value of a Textarea​

To read the current content of a textarea, you simply access its .value property.

For example, you want to retrieve the text that a user has typed into a textarea.

Solution:

const myTextarea = document.getElementById('my-textarea');

// Get the current value
const currentText = myTextarea.value;

console.log(currentText); // Output: "Default text content"
note

If the textarea were empty, this would return an empty string!

How to Set or Clear the Value of a Textarea​

To change the content of a textarea, you assign a new string to its .value property. This will overwrite any existing content.

Some examples:

const myTextarea = document.getElementById('my-textarea');

// To SET a new value
myTextarea.value = 'This is the new text.';
console.log(myTextarea.value); // Output: "This is the new text."

// To APPEND to the existing value
myTextarea.value += ' And this is some more text.';
console.log(myTextarea.value); // Output: "This is the new text. And this is some more text."

// To CLEAR the textarea
myTextarea.value = '';
console.log(myTextarea.value); // Output: ""

Practical Example: Responding to User Input in Real-Time​

A very common use case is to react as the user types, for example, to show a character count. The best way to do this is to listen for the input event.

HTML:

<textarea id="comment-box" maxlength="200"></textarea>
<p>Characters remaining: <span id="char-count">200</span></p>

JavaScript:

const commentBox = document.getElementById('comment-box');
const charCountSpan = document.getElementById('char-count');
const maxLength = commentBox.maxLength;

commentBox.addEventListener('input', (event) => {
  // Get the current text from the textarea
  const currentText = event.target.value;
  const currentLength = currentText.length;
  
  const remaining = maxLength - currentLength;
  
  // Update the UI
  charCountSpan.textContent = remaining;
});
note

The input event fires every time the content of the textarea changes, providing instant feedback to the user.

A Common Pitfall: .value vs. .textContent vs. .innerHTML​

It can be confusing to know which property to use. For form controls, the rule is simple.

  • .value (Correct): This property is specifically for getting and setting the current value of form elements like <input>, <textarea>, and <select>. This is the one you should always use for textareas.
  • .textContent: This property gets or sets the text content of a regular DOM node (like a <p> or <div>). It will not reliably give you the user's current input in a textarea.
  • .innerHTML: This property gets or sets the HTML content of a regular DOM node. It should not be used for textareas.

Conclusion​

Interacting with a <textarea> element in JavaScript is straightforward if you use the correct property.

  • To get or set the content of a textarea, always use the .value property.
  • To clear a textarea, set its value to an empty string: myTextarea.value = '';.
  • To react to changes in real-time, listen for the input event.

By using the .value property, you can reliably control and respond to user input in any textarea on your page.

Table of Contents