Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 521
Adyana Permatasari Avatar asked Jun 19 '26 15:06

Adyana Permatasari


2 Answers

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
like image 112
VisioN Avatar answered Jun 21 '26 04:06

VisioN


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

like image 21
user3232983 Avatar answered Jun 21 '26 05:06

user3232983