![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
こんばんは。お世話になります。
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ベストアンサー
- 回答日時:
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さんの回答をベストアンサーに選ばせて頂きました!有難うございました。
補足日時:2013/02/10 17:20遅くなりましたがお忙しい中、有難うございました。
無事に表示/非表示と切り替える事が出来ました。
大変助かりました! 有難うございます。
No.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>等を用いて同様のことが可能かと…)
この回答への補足
お二方とも丁寧で初心者の私でも理解しやすい説明をして頂いたので、どちらの方の回答をベストアンサーにしようか迷いましたが、今回は先に回答頂いていたPicosoftさんの回答をベストアンサーに選ばせて頂きました。fujillinさん、有難うございました!
補足日時:2013/02/10 17:23遅くなりましたがお忙しい中、有難うございました。
無事に表示/非表示と切り替える事が出来ました。
大変助かりました! 有難うございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
createElementで作成した要素を...
-
removeEventListenerについて
-
読み込んだQRコードをフォーム...
-
取得した要素がインライン要素...
-
classの中の<a>タグにidを追加
-
jQueryで特定id以外の下にある...
-
背景色を透明化
-
複数のリンク画像を一定時間で...
-
クリックするとテーブルの列の...
-
jQueryで同じid属性が複数あっ...
-
プルダウンとチェックボックス...
-
getElementsByClassName使い方
-
JavaScriptでテキストを表示・...
-
onclickを使わずにクリック元を...
-
一部のjavascriptがfirefoxで効...
-
textareaに画像を表示したい
-
Javascriptで画像を水面のよう...
-
JavaScriptで変更した属性の元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報