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:
- Clear a Textarea on Button click using JavaScript
- Add Line breaks to a Textarea using JavaScript
- Clear Input fields after Submit using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java