How to Clear Text-Area With a Button in HTML Using JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. How to Clear Text-Area With a Button in …
Tahseen Tauseef Feb 02, 2024
JavaScript JavaScript Textbox
  1. Event Listeners in JavaScript
  2. Add Event Listeners in JavaScript
  3. Clear Text-Area With a Button in HTML Using JavaScript
  4. Add External File of JavaScript in HTML
  5. Use External File of JavaScript to Clear Text Area With a Button
How to Clear Text-Area With a Button in HTML Using JavaScript

This tutorial article will tackle the event listener in JavaScript, how you can create event listeners in JavaScript, and how to clear a text area with a button in HTML using JavaScript. It will also answer the following questions.

  1. What are event listeners in JavaScript.
  2. How to add Event listeners in JavaScript.
  3. How to add External file of .js in HTML code.
  4. How to clear text-area with a button in HTML using JavaScript.

Event Listeners in JavaScript

An event listener is a program that sits and waits for something to happen. For example, a user clicking or moving the mouse, pressing a key on the keyboard, or disc I/O are all examples of human actions.

Likewise, network-related activity or an internal timer or interrupt are all examples of events. The listener is set up to call the event handler in response to an input or signal.

The phrase “event listener” is frequently used in Java and JavaScript. In other languages, an event handler is a procedure that provides a similar purpose.

Add Event Listeners in JavaScript

The addEventListener() is a built-in JavaScript method that accepts two arguments. The first argument is an event to listen for, and the second argument will be invoked once the stated event occurs.

Without overwriting existing event handlers, a single element can have an unlimited number of event handlers.

Code:

<html>
<body>
    <button id="test">Click here</button>
    <h1 id="data"></h1>
    <script>
    document.getElementById("test").addEventListener("click", function(){
    document.getElementById("data").innerText = "Hello There!!!";
});
    </script>
</body>
</html>

The image below shows you how the code above works. When you click on the click here button, it will give you an output of Hello there!!!.

add an event listener in JavaScript with HTML

Run this code.

Clear Text-Area With a Button in HTML Using JavaScript

There are many methods to clear text-area using a button in HTML with JavaScript. Event listeners and event handlers are used.

Code:

<form name="form" method="post" target="_blank">
    <textarea  maxlength="150">

    </textarea>

    <input type="reset" value="Clear">
</form>

You’ll type some text in the textbox to see how this code works, as seen in the screenshot below.

Clear Text-Area With a Button in HTML Using JavaScript 1

Then click the Clear button. This will clear all the text in the textbox, as shown below.

Clear Text-Area With a Button in HTML Using JavaScript 2

Run this code.

You can use HTML tags to clear the text area in the form.

Add External File of JavaScript in HTML

Script tag can be used by the src property to import an external JavaScript file. The src attribute is also used when adding images in HTML or JavaScript.

The location of your JavaScript file should be the src attribute’s value.

<script type="application/javascript" src="location/path_to_our_JavaScript_file.js"></script>

This script tag must be placed between the <head> elements in your HTML content.

Use External File of JavaScript to Clear Text Area With a Button

You can also use external .js files in HTML to add functions and event listeners to clear text-area using the button.

<input type="button" value="Clear" id="clear">
<textarea id='data' ></textarea>

Its external .js file will be called in the script function in the header of the HTML file using the src command.

var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');

input.addEventListener('click', function() {
  textarea.value = '';
}, false);

Run this code.

Another way to remove the text area in HTML using JavaScript is to change the HTML by attaching a function to the click of a button. It can be done using the following code.

<input type="button" value="Clear" onclick="javascript:eraseText();">
    <textarea id='data'></textarea>

Then add its external .js file that will give details of function javascript:erasetext(). When a user selects an element and clicks it, the onclick event is triggered.

function eraseText() {
  document.getElementById('data').value = '';
}

Run this code.

There’s one more way to use the function clearContent() with onclick.

function clearContent() {
  document.getElementById('data').value = '';
}

Given above is an external file for the following html code.

<input type="button" value="Clear" onclick="clearContent()">
<textarea id='data' ></textarea>

Run this code.

This article discussed that event listeners are another name for event handlers. For our purpose, they are nearly interchangeable, albeit they do operate together strictly speaking.

The listener is the program executed when an event occurs. The handler is just the program executed in response to the event occurring and how to add an external JavaScript file in HTML code.

Moreover, you found many functions and event listeners that can be used to clear text-area with a button using JavaScript.

Related Article - JavaScript Textbox