こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

JavaScriptでテキストを表示・非表示・・・

こんばんは。お世話になります。
JavaScriptでテキストがボタンを押すと表示/非表示と切り替わるようにしたいです。
サイトを参考に試してみましたが一か所しか表示/非表示となりませんでした。
1行おきに表示/非表示としたいのでブロック単位では指定出来ません。
display構文を使って作りました。
div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。

   ↓このような形にしたいです
 あいうえおかきくけこ 
 サシスセソタチツテト ←この行を表示/非表示
 なにぬねのはひふへほ 
 マミムメモヤユヨ ←この行を表示/非表示

こういう風なように打ちました。

あいうえおかきくけこ<br>
<div id="disp">サシスセソタチツテト</div><br>
        なにぬねのはひふへほ<br> 
<div id="disp">マミムメモヤユヨ</div><br>

<form>
<input type="button" value="表示" onclick="Hyoji1(0)">
<input type="button" value="非表示" onclick="Hyoji1(1)">
</form>

<script type="text/javascript">
<!--

function Hyoji1(num)
{
if (num == 0)
{
document.getElementById("disp").style.display="block";
}
else
{
document.getElementById("disp").style.display="none";
}
}
// -->
</script>

どの辺りを間違っているでしょうか?宜しくお願い致します。

投稿日時 - 2013-02-07 23:39:50

QNo.7933790

困ってます

質問者が選んだベストアンサー

HTMLでは複数の要素に同じIDをつけてはいけないことになっています。
そのため、document.getElementByIdを使用しても1つめの要素しか取得できません。

> div idがそれぞれの部分に必要かと思い、div id="○○a"、div id="○○b"という風に付けましたがうまくいきませんでした。
……とのことですが、
それぞれに違うIDをつけ、
document.getElementById("○○a").style.display="none";
document.getElementById("○○b").style.display="none";
と、それぞれの要素に対してスタイルを設定することで、期待した動作になるはずです。


表示・非表示を切り替えるブロックがたくさんある場合は一つ一つにIDをつけるのは大変ですので、
IDではなくname属性(こちらは他要素との重複可)とdocument.getElementsByNameなどを使う方が楽になります。

投稿日時 - 2013-02-08 00:40:48

補足

お二方とも丁寧に教えて頂いたのでベストアンサーをどちらにすべきか迷いましたが、今回は先に回答頂いていたPicosoftさんの回答をベストアンサーに選ばせて頂きました!有難うございました。

投稿日時 - 2013-02-10 17:20:38

お礼

遅くなりましたがお忙しい中、有難うございました。
無事に表示/非表示と切り替える事が出来ました。
大変助かりました! 有難うございます。

投稿日時 - 2013-02-08 16:08:58

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

文章群のうちのある部分をセットで非表示にしたいということと解釈しました。

各部分にそれぞれの表示/非表示設定を行なう処理で実現するのも、もちろん良いのですが、必ずセットで操作をおこなうことが決まっているのなら、セットで扱えるようにしておくほうが簡単そうに思います。

例えばCSSで
div.disp p { margin:0; }
div.erase p.target { display:none; }
のようにしておいて、

<div class="disp">
 <p>あいうえおかきくけこ
 <p class="target">サシスセソタチツテト
 <p> なにぬねのはひふへほ 
 <p class="target">マミムメモヤユヨ
</div>
などとしておけば、<div class="disp erase">のようにeraseクラスの設定/非設定で、そのdiv内の対象要素の表示/非表示をまとめて切り替えることが可能になります。
(文章としてご質問にp(段落)が適切なのかがわかりませんが、部分の場合は<span>等を用いて同様のことが可能かと…)

投稿日時 - 2013-02-08 08:58:45

補足

お二方とも丁寧で初心者の私でも理解しやすい説明をして頂いたので、どちらの方の回答をベストアンサーにしようか迷いましたが、今回は先に回答頂いていたPicosoftさんの回答をベストアンサーに選ばせて頂きました。fujillinさん、有難うございました!

投稿日時 - 2013-02-10 17:23:48

お礼

遅くなりましたがお忙しい中、有難うございました。
無事に表示/非表示と切り替える事が出来ました。
大変助かりました! 有難うございます。

投稿日時 - 2013-02-08 16:09:12

あなたにオススメの質問