人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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でボタンを判定する方法は良策なのでしょうか?

●質問者: gdwtseq
●カテゴリ:インターネット ウェブ制作
✍キーワード:BAR chrome Click JavaScript PHP
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● HowAreYou
●23ポイント

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

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


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

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

◎質問者からの返答

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

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

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


2 ● あすか
●23ポイント

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

id名を変えてください。

◎質問者からの返答

ありがとうございます。

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

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

これを囲む

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

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

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


3 ● rikuba
●25ポイント ベストアンサー

そもそも 複数の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);
◎質問者からの返答

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

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


4 ● あすか
●22ポイント

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

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

はい、その通りです。


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

◎質問者からの返答

勉強になります。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ