How To Clear Text Area With A Button In Html Using Javascript?

I have button in html If I have an external javascript (.js) function, wha

Solution 1:

Change in your html with adding the function on the button click

<inputtype="button"value="Clear"onclick="javascript:eraseText();"><textareaid='output'rows=20cols=90></textarea>

Try this in your js file:

functioneraseText() {
    document.getElementById("output").value = "";
}

Solution 2:

You need to attach a click event handler and clear the contents of the textarea from that handler.

HTML

<inputtype="button"value="Clear"id="clear"><textareaid='output'rows=20cols=90></textarea>

JS

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

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

and here's the working demo.

Solution 3:

<inputtype="button" value="Clear" onclick="javascript: functionName();" >

you just need to set the onclick event, call your desired function on this onclick event.

functionfunctionName()
{
    $("#output").val("");
}

Above function will set the value of text area to empty string.

Solution 4:

Your Html

<inputtype="button"value="Clear"onclick="clearContent()"><textareaid='output'rows=20cols=90></textarea>

Your Javascript

functionclearContent()
{
    document.getElementById("output").value='';
}

Solution 5:

You can use this

//use thisfunctionclearTextarea(){
  $('#output').val("");
}
// Or use this it gives the same result
$(document).ready(function () {
$(`input[name="clear-btn"][type="button"]`).on('click',function(){
  $('#output').val("");
})
})

<inputtype="button"name="clear-btn"value="Clear"onclick="clearTextarea()"><textareaid='output'rows=20cols=90></textarea><scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script>