使用Javascript和HTML创建一个清除按钮

Question

首先，我知道这个问题之前已经被问到了 - 我已经查看了这些答案，但由于某些原因它根本不适合我！

我有各种各样的文本字段，我希望有一个“清除”按钮，以便在单击时清空字段的值。

这是我的JavaScript：

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

我的HTML就是......

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

我不知道为什么它不起作用，我一直试图让它工作多年。

Answer 1

clear()通常不是一个好的函数名来定义。 它与document.clear冲突。

还记得你总是可以使用<input type="reset" value="clear"/>这可能更简单！ :)

 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

为了清楚起见， clear() 是完全有效的Vanilla Javascript。

事实上， document定义了一个clear() ：

...并且由于您的HTML属性分配了单击处理程序 ，因此使用修改后的作用域链执行， document对象的clear()位于作用域链中的全局函数之前（来自Javascript：The Definitive Guide）：

但是，注册为HTML属性的事件处理程序是一种特殊情况。 它们被转换为顶级函数，可以访问全局变量，但不能访问任何局部变量。 但是，由于历史原因，它们使用修改后的范围链运行。 由HTML属性定义的事件处理程序可以使用目标对象的属性，包含对象（如果有），以及Document对象，就好像它们是局部变量一样。

然后他讨论了你的确切案例：

HTML事件处理程序的修改范围链是陷阱的来源，因为链中每个对象的属性都会影响全局对象中同名的任何属性。 例如，Document对象定义了一个（很少使用的）open（）方法，因此想要调用Window对象的open（）方法的HTML事件处理程序必须显式写入window.open而不是open

所以，你的功能可以通过HTML中的window.clear()来实现：

 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

首先调用jquery库然后执行以下代码而不是你的代码

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

我更喜欢在body标记结束之前放置所有javascript。