How To Clear The Value Of TextArea Element In JavaScript

Clear The Value Of TextArea Element In JavaScript

To clear the value of textarea element in JavaScript, use the following syntax:

document.getElementById("textarea-id").value = "";

This will set the value of the textarea to an empty string.

HTML:

<textarea id="myTextarea">Hello, world!</textarea>

JavaScript:

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

Result:

<textarea id="myTextarea"></textarea>

In the above code, we first get a reference to the textarea element with the id “myTextarea”. We then set its value property to an empty string. This will clear the contents of the textarea.

how to clear the value of textarea element in javascript

‘value’ Property In JavaScript

The ‘value’ property is used to set or return the value of the element.

For example, the following code sets the value of a textarea to ‘Hello, world!’:

document.getElementById("textarea-id").value = "Hello, world!";

And the following code returns the value of a textarea:

var textareaValue = document.getElementById("textarea-id").value;

alert(textareaValue); // Hello, world!

As you can see, the ‘value’ property is used to both set and return the value of a textarea. When setting the ‘value’ property, the value of the textarea will be set to the specified string. When getting the ‘value’ property, the current value of the textarea will be returned as a string.

Clearing The Content Of textarea

Clearing the contents of a textarea can be very useful when you want to reuse a form that has been filled out previously. By clearing the textarea, you can prepopulate it with different values.

For example, imagine you have a form that asks the user for their name, email address, and message. The user fills out the form and submits it. You then want to allow the user to edit their submission. To do this, you can clear the textarea and prepopulate it with the user’s previous submission.

To clear the textarea, you can use the ‘value’ property as follows:

document.getElementById("textarea-id").value = "";

This will set the value of the textarea to an empty string.

HTML:

<form>

<textarea id="myTextarea"></textarea>

</form>

JavaScript:

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

Result:

Empty textarea

As you can see, this will clear the contents of the textarea.

Clearing textarea On Click Of A Button

You can also clear the value of textarea on clicking a button. Add the following code to your HTML:

<textarea id="myTextarea" rows=20 cols=20></textarea>

<button onclick="clearText()">Clear text</button>

And add the following JavaScript code:

function clearText() {

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

}

This will call the clearText function when the button is clicked. This function will get a reference to the textarea with the id “myTextarea” and set its value property to an empty string.

Conclusion

In this article, we saw how to clear the value of a textarea in JavaScript. We also saw how to clear the contents of a textarea on click of a button.

I hope you find this article helpful. If you have any questions or comments, please feel free to leave them below.

Happy coding!

Leave a Reply