name属性はどこでも使えるわけじゃない-HTML/JavaScript覚書

Ads/Widgets:
サイト情報:
QLOOKアクセス解析
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

documents.getElementsByNameという便利そうな機能で、いくつかのdivタグに同じname属性を付けといて、一斉に表示・非表示を切り替えるようにしてやろうと思ったが、これはうまく動かない場合がある。というかChromeでは意図通りに動くのに、IEでは意図通りに動かない。

スクリプト
function flip(name) {
  var a = document.getElementsByName(name);
  for (var i = 0; i < a.length; ++i) {
    var e = a[i];
    if (e.style.display == "none") {
      e.style.display = "block";
      continue;
    }
    e.style.display = "none";
  }
}
HTML
<a href="..." onclick="flip('hoge');">
表示切替 ←ここをクリックすると
</a><br>
<div name="hoge">
      いろいろ   ←これと
</div>
      どれこれ
      もにゃもにゃ
<div name="hoge">
      あれこれ  ←これが表示されたり消えたりするような感じにしたかった…
</div>

全く同じように勘違いした人が世の中にはいらっしゃったようで、調べてみると、直球な答えがすぐに分かりました。

getElementsByNameで要素が取得できない - 教えて!goo

久々にJavaScriptを組みました。
以下のソースコードなんですが、ボタンクリック時にalertで「1」が表示されるはずだと思っているのですが、「0」が返ってきます。
何かおかしなところはありますでしょうか?宜しくお願いします。
教えて!gooより抜粋

(珍しく?)動かないIEの方が正しいようだ。 W3.orgのドグマにも確かにそのように定義されているなあ。

仕方ないので、大概のタグに指定できるらしいid属性のほうを使って、divタグの一覧を舐めながらidをチェックするような感じのスクリプトに変更。これならChromeでもIEでも動作した。

スクリプト
function flip(name) {
  var a = document.getElementsByTag('div');
  for (var i = 0; i < a.length; ++i) {
    var e = a[i];
    if (!e.id) continue;
    if (e.id != name) continue;
    if (e.style.display == "none") {
      e.style.display = "block";
      continue;
    }
    e.style.display = "none";
  }
}
HTML
<a href="..." onclick="flip('hoge');">
表示切替 
</a><br>
<div id="hoge">   ←ここと
      いろいろ
</div>
      どれこれ
      もにゃもにゃ
<div id="hoge">
      あれこれ  ←ここをname属性からid属性の指定に変更
</div>

このやり方を応用して、ブログに表示しているいくつかの情報の表示・非表示を切り替えるチェックボックスを設置してみました。


どこでも使えるような仕様にしてもいいじゃん、メンドクサイなあもう
この記事へのコメント
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://arakiba.blog62.fc2.com/tb.php/160-5304faa1
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 Copyright © アラキバ All rights reserved. 

 / Template by 無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。