How to clear textbox on HTML using Javascript

javascript html button textarea

69,537

Solution 1

Just rename your function from clear to something like clearTextarea and it will work.

The clear() method refers to obsolete document.clear() method, which is described at MDN as:

This method used to clear the whole specified document in early (pre-1.0) versions of Mozilla. In recent versions of Mozilla-based applications as well as in Internet Explorer and Netscape 4 this method does nothing.

Also according to HTML5 specification:

The clear() method must do nothing.

References:

Solution 2

if you use a function like this one

function clearInput(element){
element.value="";
}

then in the input add this

onfocus="clearInput(this)"

this can be used multiple times for any text fields or text areas because the id of the object is passed where it calls the function from.

RKillah

69,537

Author by

Adyana Permatasari

Updated on June 27, 2020

Comments

Adyana Permatasari about 4 years

I have code in html like this

<html>
<script type="text/javascript" src='LatihanKuisJs.js'></script>
    <body>
        <form name="kuis">
            <table border="1" width="50%">
                <tr>
                    <th colspan="2" >Celcius
                </tr>
                <tr>
                        <td align="center" width="80%">Kelvin</td>
                        <td align="center"><input type="text" id="kelvin">
                        </td>
                </tr>
                <tr>
                    <td align="center" width="80%">Reamur</td>
                    <td align="center"><input type="text" id="reamur"></td>
                </tr>
                <tr>
                    <td align="center" width="80%">Fahrenheit</td>
                    <td align="center"><input type="text" id="fahrenheit"></td>
                </tr>
            </table>
            <input type="button" value="Calculate" onclick='calculateCelcius();'/>
            <br/><br/>
            <textarea rows="20" cols="90" id="textarea">
            </textarea>
            <br/><br/>
            <input type="button" value="Clear" onclick='clear();'/>
        </form>
    </body>
</html>

and external javascript function like this:

function calculateCelcius(){
    var kelvin = document.getElementById('kelvin');
    var reamur = document.getElementById('reamur');
    var fahrenheit = document.getElementById('fahrenheit');
    var textarea = document.getElementById('textarea');

    var hasil=(kelvin.value*1 + reamur.value*1 + fahrenheit.value*1);
    textarea.value += hasil + '\n';
}

function clear(){
    document.getElementById("textarea").value="";
}

When I tried to click the clear button on my page, the text area wasn't clear. What's wrong? And what should I do?