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.

Answer 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> 

Answer 2

正如@Pratyush已经提到的，将函数名称更改为其他内容 - 您的代码将正常工作。

Answer 3

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> 

Answer 4

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.