Creating a clear button using Javascript and HTML

Question

Firstly, I know this question has been asked before on here - I have looked at those answers but for some reason it is not working for me at all!

I have a variety of text fields for which I would like to have a 'clear' button to empty the value of the field when clicked.

This is my JavaScript:

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

and my HTML for this is...

<table border="1" id="orderForm">
    <tr>
        <th colspan="2">Customer Details</th>
    </tr>
    <tr>
        <td id="font">Customer Name</td>
        <td><input type="text" id="customerName"></td>
    </tr>
</table>

<button type="button" id="button1" onClick="clear()">Clear</button>

I have no idea why it won't work, and I've been trying to get it work for ages.

Try changing your function name. Check this [Is “clear” a reserved word in Javascript?](http://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript) — Pratyush, Apr 16 '17 at 16:46
This is correct! Can't believe it was as simple as that. Thanks very much! — shadowmoses__, Apr 16 '17 at 16:49

mayersdesign · Accepted Answer · 2017-04-16T18:11:44.987

1

clear() is generally not a good function name to define. It conflicts with document.clear.

Also remember you can always just use <input type="reset" value="clear"/> which might be even simpler! :)

function clearIt() {
 document.getElementById('customerName').value = "";
}

<table border="1" id="orderForm">
  <tr>
    <th colspan="2">Customer Details</th>
  </tr>
  <tr>
    <td id="font">Customer Name</td>
    <td><input type="text" id="customerName"></td>
  </tr>
</table>

<button type="button" id="button1" onClick="clearIt()">Clear</button>

edited Apr 16 '17 at 18:11

answered Apr 16 '17 at 16:48

mayersdesign

5,062
4
35
47

Edited slightly to accommodate @sweaver2112 's very useful info about `document.clear` – mayersdesign Apr 16 '17 at 18:12

score 0 · Answer 2 · answered Apr 16 '17 at 16:48

0

As @Pratyush already mentioned, change function name to something else - your code will work fine.

answered Apr 16 '17 at 16:48

Egor Stambakio

17,836
5
33
35

Scott Weaver · Answer 3 · 2017-04-16T17:53:34.867

Just to be clear, clear() is perfectly valid Vanilla Javascript.

It just so happens that document defines a clear() also:

...and since your HTML attribute assigned click handler gets executed with a modified scope chain, the document object's clear() comes before your global function in the scope chain (from Javascript: The Definitive Guide):

Event handlers registered as HTML attributes are a special case, however. They are converted into top-level functions that have access to global variables but not to any local variables. But, for historical reasons, they run with a modified scope chain. Event handlers defined by HTML attributes can use the properties of the target object, the containing object (if there is one), and the Document object as if they are local variables.

and then he discusses your exact case:

the modified scope chain of HTML event handlers is a source of pitfalls, since the properties of each of the objects in the chain shadow any properties of the same name in the global object. The Document object defines a (rarely used) open() method, for example, so an HTML event handler that wants to invoke the open() method of the Window object must explicitly write window.open instead of open

so, your function could be reached via window.clear() in the HTML:

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

<table border="1" id="orderForm">
    <tr>
        <th colspan="2">Customer Details</th>
    </tr>
    <tr>
        <td id="font">Customer Name</td>
        <td><input type="text" id="customerName"></td>
    </tr>
</table>

<button type="button" id="button1" onClick="window.clear()">Clear</button>

score -1 · Answer 4 · answered Apr 16 '17 at 16:45

First call jquery library and then do the following code instead of yours one

$document.ready(function(){
$("button1").click(function(){
document.getElementById("#customerName").value="";
});
});

I prefer to put all javascript before the end of body tag.

Creating a clear button using Javascript and HTML

4 Answers4