Clear textarea with javascript

How to Clear a Textarea Field In JavaScript

We can clear a textarea field using JavaScript easily by making use of the value property. We simply need to set the value of the textarea field to an empty string.

document.getElementById("textarea1").value = ""; 

Let’s see a quick example of this below:

Let’s say we have the following HTML:

The textarea field in the example above will have the text “This is some default text.”. If we want to clear the textarea in the example above, we would use the following JavaScript code:

document.getElementById("userText").value = ""

We can also clear a textarea field easily using jQuery by making use of the jQuery val() method.

Let’s do an interactive example of clearing a textarea field below.

Using JavaScript to Clear a Textarea Field with a Click

Below we will have a simple textarea field. It will start prefilled with some text from our about page. We will then let the user clear the textarea.

 
Clear textarea field above
 
 

We will simply use the value property to set the textarea field to an empty string. We will need to put this code in a function that we call when the user clicks the button below the textarea field.

We will add an onclick event to our button below the textarea field that will call our function.

Here is the JavaScript function:

The final code and output for this example of how to clear a textarea field using JavaScript is below:

 
Clear textarea field above
 
  

Getting the Value From an Textarea Field Using JavaScript

To get the value from a textarea field, we can once again use the value property.

Let’s say we have the following HTML:

To get the value from the textarea field, we would use the value property.

var textareaText = document.getElementById("userText").value;

Hopefully this article has been useful to help you understand how to clear a textarea in JavaScript.

Other Articles You’ll Also Like:

• 1. JavaScript cos – Find Cosine of Number in Radians Using Math.cos()
• 2. Clicking on an Image to Enlarge it in HTML
• 3. Using JavaScript to Add Leading Zeros
• 4. Using JavaScript to Calculate Average of Array of Numbers
• 5. How to Convert Radians to Degrees Using JavaScript
• 6. Set Text with the textContent Property in JavaScript
• 7. Add Days to a Date Using JavaScript
• 8. Using JavaScript to Get the Height of an Element
• 9. JavaScript toLocaleString – Display the Date and Time Using JavaScript
• 10. Using JavaScript to Set the Width of a Div

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Источник

Clear textarea with javascript

Last updated: Jan 12, 2023
Reading time · 2 min

# Clear the Value of a Textarea using JavaScript

To clear the value of a textarea element, set its value property to an empty string, e.g. textarea.value = » .

Setting the element’s value to an empty string removes any of the text from the element.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> label for="message">Your message:label> textarea id="message" name="message" rows="5" cols="33">textarea> button id="btn">Clear valuebutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const textarea = document.getElementById('message'); // ✅ Clear the textarea value textarea.value = ''; // ✅ Clear textarea value on click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick()  // 👇️ log value before clearing it console.log(textarea.value); // 👇️ clear textarea value textarea.value = ''; >); 

We used the document.getElementById() method to select the textarea element.

Источник

How To Clear A Textarea On Button Click Using JavaScript

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:

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» .

// 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(); >;

Using the onclick event and value attribute

You can get or set a value for any text object using the value attribute.

onclick syntax:

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.

// 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 = ''; >;

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() :

// 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 = ''; >);

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:

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

Источник

Quick Tips To 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

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:

  
Hello, World! This is LearnShareIT 
 

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 = ''; >;

Using the textContent property

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 = ''; >;

Using the innerHTML property.

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 = ''; >;

Using the innerText property.

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 = ''; >;

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.

Maybe you are interested:

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

Источник