一つの<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でボタンを判定する方法は良策なのでしょうか?
そもそも 複数の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);
不要だと思われる情報でもできるだけ省略せずに記述 (実際のものをコピー&貼り付け) された方がいいと思います。
form の HTML とかスクリプトとか。
そこで、確認ですが、三つのボタンの ID はすべて別のものになっているでしょうか?
ひとつめが foo_button、ふたつめが bar_button で、みっつめがまた foo_button になっているとかはないでしょうか。
いいえ、三つのボタンはすべて違うIDです。
アドバイスありがとうございます。
それにしてもハテナの文字制限 最大500文字までって、少なすぎませんか?(+_+)
1つのHTMLページの中に同じid名(ここでは id="foo_button")が複数あることが間違いの原因です。
id名を変えてください。
ありがとうございます。
<INPUT type="button" id="bar_button" ... >のIDはそれぞれ異なっていますが、
<INPUT type="button" id="zoo_button" ... >
これを囲む
こんなことでも異なるボタンと判定してくれないのでしょうか??
そもそも 複数の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って結構幅広く機能があるのですね。
ご提示の例 とても分かり易い説明ありがとうございます
タグのID="button"が重複していました。
こんなことでも異なるボタンと判定してくれないのでしょうか??
はい、その通りです。
ブラウザの実装にもよるのですが、たいていはgetElementById関数が正常に動作しないのでエラーとなります。
勉強になります。
ありがとうございます。
javascriptって結構幅広く機能があるのですね。
ご提示の例 とても分かり易い説明ありがとうございます