使用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对象{{1 }}来自范围链中的全局函数（来自Javascript：The Definitive Guide）：

  

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

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

  

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

因此，您可以通过HTML中的clear()来访问您的功能：

＆＃13;

＆＃13;

window.clear()

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

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

我更喜欢将所有javascript放在body标记的末尾。