JavaScript作成ボタンから関数を実行する適切な方法はありますか？

Question

Javascriptを使用してWebページにいくつかのシンプルなボタンを作成しています。クリックすると関数を呼び出す必要があります。回答の検索に基づいて動作する次の例を考え出しました。しかし、関数を呼び出すだけの関数を作成するのは間違っているようです。スクリプト内の他の場所にある関数 "click_button"を他の方法で直接呼び出すことができませんでした。

これは動作します：

my_button.onclick = function(){ 
    click_button(my_button.value); 
    } 

これらは動作しません：

// This executes on first run, but not when clicked. 
my_button.onclick = click_button(my_button.value); 
// This doesn't do anything when clicked. 
my_button.onclick = "click_button(my_button.value);"; 

はJavaScriptでボタンのクリックから機能を呼び出すための適切な方法トップの例ですか？

ありがとうございました。

Answer 1

最初の例では、ボタンをクリックしたときに呼び出される関数への参照を割り当てます。これは正しいです。

2番目の例では、click_button関数の結果をonclickに割り当てます。コードがエンジンによって読み取られると、click_button関数が実行され、結果の値がonclickに代入されます。だからあなたのボタンをクリックすると、実行する機能はなく、単なる値です。

3番目の例では、onclickに文字列を割り当てるだけです。これは動作しません。

だから最初の方法は正しい方法です。

Answer 2

私はあなたの最後の2つの例は、ない作業を行う理由を説明することから始めましょう：

my_button.onclick = click_button(my_button.value); 

これはすぐにclick_button()関数を実行し、機能がmy_button.onclick

my_button.onclick = "click_button(my_button.value);"; 

に返すものは何でも割り当てられますが

my_button.onclickの値を文字列に設定するだけです。ボタンのonclickプロパティは、JavaScriptコードを含む文字列を内部に想定していないため、そのように評価することはありません。

---

あなたはonclickプロパティがここでどのように機能するかを見ることができます： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

onclickに割り当てられた機能はMouseEventを渡されます。であることを渡された値がMouseEvent、ない何になりますので

my_button.onclick = click_button // won't be given my_button.value 

：あなたは、単にそのようonclickに関数自体を割り当てることはできません、今のようにあなたのclick_button関数は、パラメータとして値をとります期待する。あなたは値パラメータを必要としないためにclick_button機能を変更する場合

、その後、あなたが何かを行うことができます：あなたが関数にmy_button.valueを渡すことができるようにしたい場合は、そうでない場合

function click_button() { 
    // Do stuff using this.value or my_button.value directly 
} 

my_button.onclick = click_button 

を、あなたはラップする必要がありますそれは別の関数で、最初の例で正しく行うようにします。

---

@Mikeyはコメントで指摘したように、あなたは、関数の内部this.valueを使用して値を取得することができます。 MDNドキュメントは、thisがその機能内の要素に設定されると述べています。