CODEWITHSUNDEEP
javascripthtmlbuttontextarea
Adyana Permatasari
Adyana Permatasari

Reputation: 157

How to clear textbox on HTML using Javascript

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?

Upvotes: 2

Views: 72278

Answers (3)

user3232983
user3232983

Reputation: 11

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

Upvotes: 1

VisioN
VisioN

Reputation: 145368

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:

  1. https://developer.mozilla.org/en-US/docs/DOM/document.clear
  2. http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-clear

Upvotes: 10

Ali Shah Ahmed
Ali Shah Ahmed

Reputation: 3333

Try adding javascript: before your function name when defining onclick event.
Something like this:

<input type="button" value="Clear" onclick='javascript: clear();'/>

Upvotes: -2

Related Questions