データ1件の時にlengthプロパティがundefinedでJavaScriptエラー

| コメント(0) | トラックバック(0)


このエントリーをはてなブックマークに追加
動的に1~10個ぐらいのデータが表示されるリストに対して、それぞれチェックボックスを表示してあって、ワンクリックで、全てにまとめてチェックを入れるJavaScriptの関数を書いてた。こんな風に。

if(document.hoge.length){
for (i = 0; i < hoge.length; i++ ) {
document.hoge[i].checked = true;
}

チェックボックス付のデータが複数ある時は問題なく動くのだけど、データが1件のみのときにどうしてもhoge.lengthがundefinedでfor文以下の処理が実行されずに不具合になる。

意味が分からない。と、半日ほど悩んでいたら簡単なことだった。知らなくて恥ずかしい><
JavaScript上でのフォーム部品は、同名の要素が複数ある場合にのみ、配列として扱われるのだそう。

つまり、チェックボックスが1件の時は、document.hogeが配列として扱われない。
そのため、「配列」の長さを返すlengthプロパティが動作しないのだそうだ。

対処法はいたって単純で、要素が1つの時と、2個以上の時の処理を書き換えるだけ。

hogeの末尾には、1つ目のデータから、0から始まるインクリメントする数字を付与していて、1つのときも、ワンクリックでチェックを入れるという処理はそのままにしておいたので、

if(document.hoge.length){
for (i = 0; i < hoge.length; i++ ) {
document.hoge[i].checked = true;
}else{
document.hoge0.checked = true;
}

lengthプロパティから、偽が返ってきたときにのみ、1つ目のチェックボックス、document.hoge0に対して処理を実行すれば解決。
hoge0は添え字hoge[0]でなくて、ただの名前です。

他にも関連している複数の関数で同様の不具合が同時発生的に起こっていたので、途方に暮れかけていましたが、いつも使う単純なやつこそ落とし穴があるというね。。。

毎度、たまにしかコード書かないので、いつまでたっても成長が見えません。

トラックバック(0)

トラックバックURL: http://www.enjoy-com.com/mt/mt5/mt-tb.cgi/868

コメントする

        

人気エントリー