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>

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

回答No.1

Picosoft · ベストアンサー

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などを使う方が楽になります。

お礼

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

補足

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

回答No.2

fujillin

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

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

例えばＣＳＳで
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>等を用いて同様のことが可能かと…）

お礼

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

補足

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