In the previous article, we showed you 4 ways to clear the value of a textarea. In the code samples, we also mentioned clearing the text when the button is clicked, but not thoroughly. So today, we decided to show you how to clear a Textarea on Button click using JavaScript. But this time, we will focus on the button’s click event.
Clear a Textarea on Button click using JavaScript
Below are 3 ways to clear a Textarea when the button is clicked. Let’s read together and find out the difference between them!
Using form reset() and setAttribute() methods
We covered the setAttribute() method here. You can read more if you want.
reset() syntax:
form.reset()
Description:
Form reset() resets all values in a form.
To clear the textarea when the button is clicked using the reset() method. We have to wrap the textarea tag and the button tag in the form tag. Then get the button tag and use the setAttribute() method to set the type = "reset".
index.html:
<body>
<main>
<!-- Wrap textarea tag and button tag in form tag -->
<form>
<textarea class="text-area" rows="5"></textarea>
<button class="btn">Click to clear text</button>
</form>
</main>
<script type="module" src="script.js"></script>
</body>script.js:
// Get button element
const btn = document.querySelector('.btn');
// Use setAttribute() to set type="reset"
btn.setAttribute('type', 'reset');Or you can use reset() like this:
// Get button element and form element
const btn = document.querySelector('.btn');
const form = document.querySelector('form');
// Use onclick to reset form
btn.onclick = function (e) {
// Prevent redirect
e.preventDefault();
// Reset form
form.reset();
};Output:
Using the onclick event and value attribute
You can get or set a value for any text object using the value attribute.
onclick syntax:
obj.onclick = func
Description:
When the obj is clicked, the func will be executed.
In this case, we don’t need to use the form tag. After getting the button and textarea elements, we call the onclick event on the button and set it with a function that sets the value of the textarea to empty. As below.
index.html:
<body>
<main>
<textarea class="text-area" rows="5"></textarea>
<button class="btn">Click to clear text</button>
</main>
<script type="module" src="script.js"></script>
</body>script.js:
// Get button element and textarea element
const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text-area');
// Using onclick event
btn.onclick = function () {
// Clear the textarea
textArea.value = '';
};Output:
Using the addEventListener() method
We have introduced the syntax of addEventListener() here. You can learn more.
This approach is similar to the one above, but since addEventListener() is a method and onclick is an attribute, their usage is slightly different. In this case, we will pass the function that sets the value of the textarea to empty into the second argument of addEventListener(), and the first argument is an event type in string form. See the example below to know the difference between onclick and addEventListener():
index.html:
<body>
<main>
<textarea class="text-area" rows="5"></textarea>
<button class="btn">Click to clear text</button>
</main>
<script type="module" src="script.js"></script>
</body>script.js:
// Get button element and textarea element
const btn = document.querySelector('.btn');
const textArea = document.querySelector('.text-area');
// Using addEventListener()
btn.addEventListener('click', function () {
// Clear the textarea
textArea.value = '';
});Output:
Summary
Through our 2 tutorials on clearing the textarea, we’ve introduced a bunch of properties and methods to clear a Textarea on Button click using JavaScript. Visit our website regularly to update your IT knowledge.
Maybe you are interested:
- Create an Element with Style attribute in JavaScript
- Clear the Value of a Textarea using JavaScript
- Add Line breaks to a Textarea 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
