Javascript のaddEventListener で複数あるボタンの中から、クリックされたものを判定しようとしています。

一つの<FORM>の中に、3つの<INPUT type="button" id="foo_button" ... >が在ります。

window.onload() 内で、3つのボタンに対して addEventListenerを 3つ書いています。

例】
var form_obj = document.MyForm;
// 1個目のボタン
document.getElementById("foo_button").addEventListener('click', function() {
form_obj.setAttribute( 'action' , 'foo.php' );
form_obj.submit();
}, false);
// 2個目のボタン
document.getElementById("bar_button").addEventListener('click', function() {
form_obj.setAttribute( 'action' , 'bar.php' );
form_obj.submit();
}, false);
// 3個目のボタン(省略)

上記のように<FORM>の中のどのボタンが押されたかによって、別々のページへ submitしようとしていますが。

1個目、2個目のボタンは思う通りのページへ飛んでくれるのですが、
3個目のボタンを押しても、ページに飛びません。全く反応がありません。なぜでしょうか?


javascript初心者ですが、
最近、document.getElementById("foo_button").addEventListener('click', function() { ...
の便利さにハマリ、
上記の障害にもハマッております。
ブラウザ:Chrome 11

そもそも 複数のaddEventListenerでボタンを判定する方法は良策なのでしょうか?

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2011/05/09 23:10:53
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rikuba No.3

回答回数26ベストアンサー獲得回数12

ポイント25pt

そもそも 複数のaddEventListenerでボタンを判定する方法は良策なのでしょうか?

clickやkeydownといったイベントは、その発生源の要素のみならず、その祖先のノードにも伝播します(これをイベントバブリングと呼びます・バブリングしないイベントもあります)。バブリングするイベントは、発生源となりうる要素ではなく、より上位のノードにイベントリスナを登録することで、包括的に処理することができます。

addEventListenerで登録したイベントリスナ関数には、第一引数にイベントオブジェクトが渡されます。このオブジェクトには、発生したイベントに関する詳細な情報が含まれます(イベントの発生源となった要素、座標など)。

今回の例であれば、次のように1つの関数で処理することができます。これならwindow.onloadを待つ必要もありません。

document.addEventListener('click', function (e) {
  var target = e.target;   /* クリックされた最深の要素 */
  var form = target.form;  /* テキストフィールドやボタンのformプロパティは、属するform要素を指す */
  if (target.tagName === 'INPUT' && target.type === 'button') {  /* もしtargetが<input type="button">なら */
    switch (target.id) {
      case 'foo_button':
        form.action = 'foo.php';
        form.submit();
        break;
      case 'bar_button':
        form.action = 'bar.php';
        form.submit();
        break;
      case 'zoo_button':
        form.action = 'zoo.php';
        form.submit();
        break;
      default:
        break;
    }
  }
}, false);
id:gdwtseq

javascriptって結構幅広く機能があるのですね。

ご提示の例 とても分かり易い説明ありがとうございます

2011/05/09 14:05:36

その他の回答3件)

id:HowAreYou No.1

回答回数91ベストアンサー獲得回数17

ポイント23pt

不要だと思われる情報でもできるだけ省略せずに記述 (実際のものをコピー&貼り付け) された方がいいと思います。

form の HTML とかスクリプトとか。


そこで、確認ですが、三つのボタンの ID はすべて別のものになっているでしょうか?

ひとつめが foo_button、ふたつめが bar_button で、みっつめがまた foo_button になっているとかはないでしょうか。

id:gdwtseq

いいえ、三つのボタンはすべて違うIDです。

アドバイスありがとうございます。

それにしてもハテナの文字制限 最大500文字までって、少なすぎませんか?(+_+)

2011/05/08 22:12:22
id:asuka645 No.2

回答回数856ベストアンサー獲得回数97

ポイント23pt

1つのHTMLページの中に同じid名(ここでは id="foo_button")が複数あることが間違いの原因です。

id名を変えてください。

id:gdwtseq

ありがとうございます。

<INPUT type="button" id="bar_button" ... >のIDはそれぞれ異なっていますが、

<INPUT type="button" id="zoo_button" ... >

これを囲む

タグのID="button"が重複していました。

こんなことでも異なるボタンと判定してくれないのでしょうか??

タグのIDを異なるようにしたら、成功しました。

2011/05/08 22:27:07
id:rikuba No.3

回答回数26ベストアンサー獲得回数12ここでベストアンサー

ポイント25pt

そもそも 複数のaddEventListenerでボタンを判定する方法は良策なのでしょうか?

clickやkeydownといったイベントは、その発生源の要素のみならず、その祖先のノードにも伝播します(これをイベントバブリングと呼びます・バブリングしないイベントもあります)。バブリングするイベントは、発生源となりうる要素ではなく、より上位のノードにイベントリスナを登録することで、包括的に処理することができます。

addEventListenerで登録したイベントリスナ関数には、第一引数にイベントオブジェクトが渡されます。このオブジェクトには、発生したイベントに関する詳細な情報が含まれます(イベントの発生源となった要素、座標など)。

今回の例であれば、次のように1つの関数で処理することができます。これならwindow.onloadを待つ必要もありません。

document.addEventListener('click', function (e) {
  var target = e.target;   /* クリックされた最深の要素 */
  var form = target.form;  /* テキストフィールドやボタンのformプロパティは、属するform要素を指す */
  if (target.tagName === 'INPUT' && target.type === 'button') {  /* もしtargetが<input type="button">なら */
    switch (target.id) {
      case 'foo_button':
        form.action = 'foo.php';
        form.submit();
        break;
      case 'bar_button':
        form.action = 'bar.php';
        form.submit();
        break;
      case 'zoo_button':
        form.action = 'zoo.php';
        form.submit();
        break;
      default:
        break;
    }
  }
}, false);
id:gdwtseq

javascriptって結構幅広く機能があるのですね。

ご提示の例 とても分かり易い説明ありがとうございます

2011/05/09 14:05:36
id:asuka645 No.4

回答回数856ベストアンサー獲得回数97

ポイント22pt

タグのID="button"が重複していました。

こんなことでも異なるボタンと判定してくれないのでしょうか??

はい、その通りです。


ブラウザの実装にもよるのですが、たいていはgetElementById関数が正常に動作しないのでエラーとなります。

id:gdwtseq

勉強になります。

ありがとうございます。

2011/05/09 14:50:08

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません