QA@IT

javascriptでbuttonのid取得

7419 PV
html
<form name="demo">
    <input type="button" id="test1" value="test1へ"/>
    <input type="button" id="test2" value="test2へ"/>
    <input type="button" id="test3" value="test3へ"/><br>
</form>

このようなindex.htmlがある場合、

window.addEventListener("DOMContentLoaded", function(){
document.getElementById("demo").addEventListener("click", Test, false);
},false);
上記ような記述をjavascriptファイルで行うとします。

function Test(){
var select_button =
}

上記のselect_buttonにhtmlのidを取得したいのですが、どのようにすれば良いのでしょうか?
OnClickは使用したくありません。
よろしくお願いします。

  • formに対してのclickイベントを付与だと思うのですが、その中のボタンの3つそれぞれのidを取得したいということでしょうか? -
  • > formに対してのclickイベントを付与だと思うのですが ... => formに対するイベントハンドラの設定ですがイベントのバブリングによって取得できます。 -
  • そうでした。ありがとうございます。 -

回答

イベントオブジェクトから取得できます。
Chromeでは以下の様になります。

function Test(e){
    var select_button = e.srcElement.id;
}

window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("demo").addEventListener("click", Test, false);
},false);

なお、Formにidがないので、getElementByIdは失敗します。

<form name="demo" id="demo">
(以下略)

としてください。

編集 履歴 (0)
  • もう一つ質問させてください。
    上記のようにidを取得した際、新規タブでそれぞれ別のURLページを、
    例えば
    id=test1の時 http://yahoo.co.jp
    id=test2の時 http://google.co.jp
    というようにオープンするにはどのようなjavascriptを書けばよいのでしょうか?

    ぜひ教えていただきたいです。
    -
  • if文とwindow.openでは上手くいかなかったという事ですか? -
ウォッチ

この質問への回答やコメントをメールでお知らせします。