1. 経緯
現在、ECサイトのパッケージ改修を行っている。
その中で最近開発のフォローで躓いた内容の共有、及び備忘録として紹介する。
2. jsp(html)内の要素のidの重複について
・jsp(html)内で同じidの要素は複数存在してはならない規則になっているが、複数存在しても許容されて(エラーにはならず)動作するようになっている。
しかし、エラーにはならずとも不具合の原因にはなる。
・JavaScript(以降js)やJQueryで重複しているidのvalueを取得する際、(ソース上の記述で)最初の要素の値が取得される。
・このように、他の言語ではエラーになるような箇所でエラーにならないため、見逃しやすく不具合の原因になりやすい。
3. 内容
・jsで値を取得する際、要素のvalueには値が入っているが、値を取得できなかった。
(例:value = 100に対して、取得できた値が0だった)
・調べた結果、取得しようとした要素と同じidの要素があることが判明。
ソース上で要素間の間に2千行ほど間があったため、目視ではなかなか気づきにくかった。また、1つは表示し、もう1つは非表示状態であったことも気づきにくい要因になった。
・idが重複することになった背景として、半年以上前にパッケージ標準のレイアウトから本案件用のレイアウトに当て込みを行った際に、作業担当者が元々のレイアウト部分を非表示にして、新しいレイアウト部分に元々の要素と同様のidを使用していた。
・今回レイアウトの一部変更と一部機能の追加、それに伴いjs側での処理の追加も必要になったため、上記問題が影響を及ぼした。
4. まとめ
・jsp(html)では要素のidが重複していてもエラーにはならない。
・jsやjQueryで値のセットや取得でも要素のidが重複していてもエラーにはならない。(ソース上で最初に記述されている要素に対して処理)
・エラーにならなくてもidの重複は不具合の原因になるため(規約上も禁止のため)、重複しないように気を付けること。
以上
コメント