Quick Tips To Clear The Value Of A Textarea Using JavaScript

Clear the Value of a Textarea using JavaScript

To continue the series of JavaScript tutorials, today, we will show you how to clear the value of a Textarea using JavaScript. Continue reading this article and practice the examples below.

Clear the value of a Textarea using JavaScript

Here are 4 ways we want to introduce to you. Find the way that works best for you.

Using the value property

Syntax:

textObj.value

textObj.value = text

Description:

The value property is used to get the value of a text object or can be used to assign text to the value property of a text object.

In our case, we will use the value property to set the value of the textarea element to an empty string. That means we have entirely cleared the value of the textarea element. Like this:

Index.html:

<body>
    <main>
      <textarea class="text" id="text" cols="30" rows="10">Hello, World! This is LearnShareIT</textarea>
      <button class="btn">Clear the text</button>
    </main>
    <script type="module" src="script.js"></script>
</body>

Script.js:

const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text');

// Clear the value when the button is clicked
btn.onclick = function () {
  // Clear the value inside textarea
  textArea.value = '';
};

Output:

Using the textContent property

Syntax:

element.textContent

element.textContent = text

Description:

The textContent property is used to get the text of a DOM element or to set the text for a DOM element.

Similar to the way above, we can use textContent to clear the value of the textarea by setting the textContent property of the textarea element to empty. As below:

const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text');

// Clear the value when the button is clicked
btn.onclick = function () {
  // Clear the textContent inside textarea
  textArea.textContent = '';
};

Output:

Using the innerHTML property.

Syntax:

element.innerHTML

element.innerHTML = htmlContent

Description:

The innerHTML property is used to get HTML content of a DOM element or to set HTML content for a DOM element.

We can also use innerHTML to set the content of a DOM element to empty, as shown below.

const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text');

// Clear the value when the button is clicked
btn.onclick = function () {
  // Clear the innerHTML inside textarea
  textArea.innerHTML = '';
};

Output:

Using the innerText property.

Syntax:

element.innerText

element.innerText = text

Description:

The innerText property is used to get the text content of a non-hidden DOM element or to set the text for a DOM element.

Similar to the above 3 ways, we can also use innerText to clear the value of the textarea tag by setting the innerText property of the textarea element to empty.

const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text');

// Clear the value when the button is clicked
btn.onclick = function () {
  // Clear the innerText inside textarea
  textArea.innerText = '';
};

Output:

Summary

In summary, we can use all 4 properties above in our case to clear the value of a Textarea using JavaScript. However, they are four different properties, and they perform different functions. Do you want to know how they are different? Try to find out here.

Have a nice day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *