JavaScript

[JavaScript] 複数の同名idを定義した場合の動き

投稿日:

1つのHTML中ではidは一意にする必要がありますが、誤って同名のidを複数定義してしまった場合にどのような動きとなるかをまとめてみました。

サンプルソース

例)id="d1"を3つ定義した場合にgetElementById("d1") する

1つめのdivにのみ値がセットされます。
一番最初に見つかったIDが対象となるようです。

例2)id="btn1"のボタンを3つ定義し、clickイベントをセットする

1つめのボタンのみclickイベントがセットされます。
2つめ、3つめのボタンにはイベントは何もセットされません。

例3)同じボタンにclickイベントを3回定義する

(結果)
3番目の定義です。

一番最後のイベントがセットされます。
上書きされて一番最後のものが残る感じですね。

まとめ

  • 同名のidを複数定義すると、1つめのものが有効になる感じです。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 枠線を設定する

JavaScriptで枠線を設定するサンプルです。 サンプルソース 例)ボタンを押すごとにid="target"要素の枠 ...

[JavaScript] keydownイベントを取得する(onkeydown)

JavaScriptでkeydownイベントを取得するサンプルです。 サンプルソース 例1)テキストボックス上でキーを押 ...

[JavaScript] 文字列を置換する(.replace)

文字列を置換するサンプルです。 置換には、replace関数を使用します。 一番初めに出現した置換対象文字のみ置換する ...

[JavaScript] 文字列中に指定した文字が出現する回数を取得する

文字列中に指定した文字が出現する回数を取得するサンプルです。 サンプル 例)引数に、文字列と指定文字を指定すると指定文字 ...

[JavaScript] 消費税額を取得するFunction

引数に受け取った金額の消費税額を返すFunctionサンプルです。 サンプルソース 例)税率8%で計算。引数が数値以外の ...

スポンサーリンク