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?

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?

Share Improve this question edited Jun 27, 2020 at 4:41 braX 11.8k5 gold badges22 silver badges37 bronze badges asked Apr 12, 2013 at 10:44 Adyana Permatasari 1573 gold badges5 silver badges13 bronze badges

Return some error into the console of your browser? – Alessandro Minoccheri Commented Apr 12, 2013 at 10:46
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 Commented Apr 12, 2013 at 10:46

Add a comment |

3 Answers 3

Sorted by: Reset to default 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:

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

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to clear textbox on HTML using Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)