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

まずコールjQueryライブラリ、代わりにあなたの私は、bodyタグの終了前に、すべてのjavascriptを置くことを好む1

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

の次のコードを実行します。

Answer 3

@Pratyushがすでに述べたように、関数名を別のものに変更してください。あなたのコードは正常に動作します。

Answer 4

ただ、明確にするために、clear()は完全に有効なバニラJavascriptのです。

ちょうどのでdocumentもclear()定義されていることが起こる：

...とあなたHTML属性割り当てられたクリックハンドラから修正スコープチェーンで実行されます、documentオブジェクトのclear()は、スコープチェーン内のグローバル関数の前にあります（Javascript：The Definitive Guideから）：

HTML属性として登録されたイベントハンドラは特別なケースですが、 です。グローバル変数へのアクセスは で、ローカル変数にはアクセスできないトップレベル関数に変換されます。しかし、 の歴史的な理由から、変更されたスコープチェーンで実行されます。イベント HTMLアトリビュートで定義されたハンドラは、 対象オブジェクト、含まれているオブジェクト（存在する場合）、および Documentオブジェクトのプロパティをローカル変数のように使用できます。

し、彼はあなたの正確なケースについて説明します。HTMLのイベントハンドラの

修正スコープチェーンは、チェーン 影の各オブジェクトのプロパティを任意のプロパティ以来、 落とし穴の源でありますグローバルオブジェクト内の同じ名前の Documentオブジェクトはそう 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>