How to clear textbox on HTML using Javascript

Question

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?

First thing would be to check your browser's developer tools console (hit F12 to open the developer tools, if you're using Firefox then you'll want to install Firebug first) and see if there are any errors being reported. — Anthony Grist
– Anthony Grist, Commented Apr 12, 2013 at 10:46

VisioN · Accepted Answer · 2013-04-12 11:24:31Z

10

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:

edited Apr 12, 2013 at 11:24

answered Apr 12, 2013 at 10:47

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Travis J Over a year ago

+1 - Hm, this is correct. Is clear a reserved word there? I made this fiddle: jsfiddle.net/292Ra which shows it working as cleart

VisioN Over a year ago

@TravisJ I'm just trying to find any evidence of that.

searlea Over a year ago

Changing the onclick to onclick="console.log(clear)" shows that clear is a native method in the context of the textarea handler (Chrome 26). No idea why.

searlea Over a year ago

The tutorialspoint reference is documentation for the Prototype JavaScript library. This isn't part of the standard DOM.

VisioN Over a year ago

@searlea Yes, this is deprecated document.clear() method, which is yet supported by browsers.

user3232983 · Accepted Answer · 2014-01-24 17:30:20Z

1

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

answered Jan 24, 2014 at 17:30

user3232983

111 bronze badge

Comments

Ali Shah Ahmed · Accepted Answer · 2013-04-12 10:48:07Z

-2

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

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

answered Apr 12, 2013 at 10:48

Ali Shah Ahmed

3,3533 gold badges26 silver badges22 bronze badges

1 Comment

searlea Over a year ago

This isn't right. The javascript: prefix is only ever needed in href or src attributes, never in event handlers.

Collectives™ on Stack Overflow

How to clear textbox on HTML using Javascript

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related