style.displayだと効率悪いから違うやり方をしたいです。 - DOBON.NETプログラミング道掲示板

DOBON.NETプログラミング道掲示板

HOME HELP 新規作成新着記事ツリー表示スレッド表示トピック表示発言ランクファイル一覧検索過去ログ

■35416 / 親階層)

　style.displayだと効率悪いから違うやり方をしたいです。

□投稿者/ えっぴー一般人(1回)-(2023/05/11(Thu) 13:00:19)

環境/言語:[javascript]　
分類:[その他]　

style.displayだと効率悪いから違うやり方をしたいです。
以下はhtmlです。
なぜ効率悪いかというと、
一つ一つ、
セレクトごとに、
document.getElementById('Box1').style.display = "";と、
document.getElementById('Box1').style.display = "none";
を書かなければならないからです。
構文が長くなってしまい、非効率です。
しかし、document.getElementById自体1つしか書けないのです。
for文を使う必要があるのです。
ご教授願えたら幸いです。
<div class="col-auto my-1">
<label for="sample">選択してください</label>
</div>
<div class="col-auto my-1">
<select class="form-control" id="sample" onchange="viewChange();">
<option value="select1">one</option>
<option value="select2">two</option>
<option value="select3">three</option>
</select>
</div>
<div class="col-auto my-5">
<div id="Box1" class="my-5">
<p>one</p>
</div>
<div id="Box2" class="my-5">
<p>two</p>
</div>
<div id="Box3" class="my-5">
<p>three</p>
</div>
</div>
<script>
function viewChange(){
if(document.getElementById('sample')){
id = document.getElementById('sample').value;
if(id == 'select1'){
document.getElementById('Box1').style.display = "";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "none";
}else if(id == 'select2'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "";
document.getElementById('Box3').style.display = "none";
}
else if(id == 'select3'){
document.getElementById('Box1').style.display = "none";
document.getElementById('Box2').style.display = "none";
document.getElementById('Box3').style.display = "";
}
}

window.onload = viewChange;
}
</script>
javascript全文を書いていただければ幸いです。

マルチポストを報告

違反を報告

上記関連ツリー
前の記事(元になった記事)	次の記事(この記事の返信)
親記事	→Re[1]: style.displayだと効率悪いから違うやり方をしたいです。 /魔界の仮面弁士
style.displayだと効率悪いから違うやり方をしたいです。 / えっぴー (23/05/11(Thu) 13:00) #35416 ←Now
`└` Re[1]: style.displayだと効率悪いから違うやり方をしたいです。 / 魔界の仮面弁士 (23/05/11(Thu) 13:27) #35417
`└` Re[2]: style.displayだと効率悪いから違うやり方をしたいです。 / えっぴー (23/05/11(Thu) 14:00) #35418
`└` Re[3]: style.displayだと効率悪いから違うやり方をしたいです。 / 福ちゃん (23/05/11(Thu) 17:34) #35419 解決済み!
`├` Re[4]: style.displayだと効率悪いから違うやり方をしたいです。 / 魔界の仮面弁士 (23/05/11(Thu) 18:32) #35420
`└` 【注意】ルールをお守りください / 管理人 (23/05/12(Fri) 03:16) #35421
上記ツリーを一括表示 / 上記ツリーをトピック表示
上記の記事へ返信

入力内容にタグは利用できません。
引用部分（行頭に「>」や「■」が付いている部分）が全体の 80% 以上のコメントは投稿できません。

半角カナは使用しないでください。文字化けの原因になります。
削除キーを覚えておくと、自分の記事の編集・削除ができます。
記事中に No*** のように書くとその記事にリンクされます(No は半角英字/*** は半角数字)。
- 使用例)
- No123 → 記事No123の記事リンクになります(指定表示)。
- No123,130,134 → 記事No123/130/134 の記事リンクになります(複数表示)。
- No123-130 → 記事No123～130 の記事リンクになります(連続表示)。

投稿前に必ずお読みください

初めて投稿される方は、必ず「書き込みのルールについて（12/4/2更新）」をお読みください。読むのが面倒、ルールを守りたくないという方は、「お気楽掲示板」へ投稿してください。
質問を投稿する場合は、「質問をする際のアドバイス」を参考にしてください。
投稿は、明記のない限り、パブリックドメインになります。
マルチポストされた投稿を報告する時は匿名で投稿し、マルチポストされている場所を併記してください。以下のリンクをクリックしていただくと、自動で下のフォームが埋まりますので、その後「送信」ボタンを押してご投稿ください。
- マルチポストの報告をする
- マルチポストの報告をするが、マルチポスト先の投稿が嫌がらせである（元の投稿者とは別人が行なっている）可能性が高い（投稿日時に開きがあり、こちらの投稿の方が早い場合は、その可能性が高いです）

Name	/
E-Mail	/
Title	/
URL	/
Comment/ 通常モード->　図表モード-> (適当に改行して下さい/半角10000文字以内) ■No35416に返信(えっぴーさんの記事) > style.displayだと効率悪いから違うやり方をしたいです。 > 以下はhtmlです。 > なぜ効率悪いかというと、 > 一つ一つ、 > セレクトごとに、 > document.getElementById('Box1').style.display = "";と、 > document.getElementById('Box1').style.display = "none"; > を書かなければならないからです。 > 構文が長くなってしまい、非効率です。 > しかし、document.getElementById自体1つしか書けないのです。 > for文を使う必要があるのです。 > ご教授願えたら幸いです。 > <div class="col-auto my-1"> > <label for="sample">選択してください</label> > </div> > <div class="col-auto my-1"> > <select class="form-control" id="sample" onchange="viewChange();"> > <option value="select1">one</option> > <option value="select2">two</option> > <option value="select3">three</option> > </select> > </div> > <div class="col-auto my-5"> > <div id="Box1" class="my-5"> > <p>one</p> > </div> > <div id="Box2" class="my-5"> > <p>two</p> > </div> > <div id="Box3" class="my-5"> > <p>three</p> > </div> > </div> > <script> > function viewChange(){ > if(document.getElementById('sample')){ > id = document.getElementById('sample').value; > if(id == 'select1'){ > document.getElementById('Box1').style.display = ""; > document.getElementById('Box2').style.display = "none"; > document.getElementById('Box3').style.display = "none"; > }else if(id == 'select2'){ > document.getElementById('Box1').style.display = "none"; > document.getElementById('Box2').style.display = ""; > document.getElementById('Box3').style.display = "none"; > } > else if(id == 'select3'){ > document.getElementById('Box1').style.display = "none"; > document.getElementById('Box2').style.display = "none"; > document.getElementById('Box3').style.display = ""; > } > } > > window.onload = viewChange; > } > </script> > javascript全文を書いていただければ幸いです。
File	/ アップ可能拡張子=> /.gif/.jpg/.png/.zip 1) 太字の拡張子は画像として認識されます。 2) 画像は初期状態で縮小サイズ250×250ピクセル以下で表示されます。 3) 同名ファイルがある、またはファイル名が不適切な場合、　　ファイル名が自動変更されます。 4) アップ可能ファイルサイズは1回20KB(1KB=1024Bytes)までです。 5) ファイルアップ時はプレビューは利用できません。 6) スレッド内の合計ファイルサイズ:[0/300KB] 残り:[300KB]
Icon	/ (画像を選択/サンプル一覧)
削除キー	/ (半角8文字以内)
解決済み! BOX/ 解決したらチェックしてください!（スレッドを閉じる目的ではチェックしないでください!）
クリエイティブ・コモンズ・ライセンスを Comment の末尾に挿入するには、以下のリンクをクリックしてください。（Javascript で挿入しているだけです。）表示（CC BY） \| 表示-改変禁止（CC BY-ND） \| 表示-継承（CC BY-SA） \| 表示-非営利（CC BY-NC） \| 表示-非営利-改変禁止（CC BY-NC-ND） \| 表示-非営利-継承（CC BY-NC-SA）
プレビュー/　クッキーに保存しない/

HOME HELP 新規作成新着記事ツリー表示スレッド表示トピック表示発言ランクファイル一覧検索過去ログ

- Child Tree -