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

■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全文を書いていただければ幸いです。

マルチポストを報告

違反を報告

■35417 / ResNo.1)

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

▲▼■

□投稿者/ 魔界の仮面弁士大御所(1544回)-(2023/05/11(Thu) 13:27:36)

2023/05/11(Thu) 13:31:57 編集(投稿者)

■No35416に返信(えっぴーさんの記事)
> style.displayだと効率悪いから違うやり方をしたいです。
そもそもなぜ、style を直接操作したいのでしょうか。
基本的には css クラスで操作する設計にするべきだと思いますが…。
https://ja.javascript.info/styles-and-classes

CSS や JS 向けのフレームワークを使うにせよ使わないにせよ、
広域的操作であれば class / className で調整した方が便利かと。

> セレクトごとに、
> document.getElementById('Box1').style.display = "";と、
> document.getElementById('Box1').style.display = "none";
> を書かなければならないからです。
短縮表記だけの話なら、
　const $id = document.getElementById;
みたいにエイリアスを用意して、
　$id('box1').style.display = 'none';
などとは書けますね。

あるいは CSSStyleDeclaration オブジェクト自体をキャッシュした
　let boxStyle = document.getElementById('Box1').style;
などを用意しておけば、以降は
　boxStyle.display = 'none';
と書くことはできますが…いずれにせよ、style は積極的に使うべきでなく、
基本的には CSS クラスで制御するようにし、それで処理しきれない要素に
限定して、style の直接操作を試みた方が良いでしょう。

> しかし、document.getElementById自体1つしか書けないのです。
document.querySelector
document.querySelectorAll
を使わないのは何故ですか? (CSS セレクター指定)
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

違反を報告

■35418 / ResNo.2)

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

▲▼■

□投稿者/ えっぴー一般人(2回)-(2023/05/11(Thu) 14:00:44)

全文と言いました。
僕は天才のように、断片的な情報から組み合わせて、完成したものを作る能力はございません。

違反を報告

■35419 / ResNo.3)

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

▲▼■

□投稿者/ 福ちゃん一般人(3回)-(2023/05/11(Thu) 17:34:17)

もういいです。
あなたを役立たずとみなします。

解決済み!

違反を報告

■35420 / ResNo.4)

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

▲▼■

□投稿者/ 魔界の仮面弁士大御所(1545回)-(2023/05/11(Thu) 18:32:47)

■No35418に返信(えっぴーさんの記事)
> 全文と言いました。
https://codepen.io/benshi-orator/pen/poxVZbg

■No35419に返信(福ちゃんさんの記事)
> もういいです。
解決済みチェックの「スレッドを閉じる目的ではチェックしないでください!」
と書かれた赤文字を読まれましたか?

掲示板の投稿ルールを守って利用してください。
https://dobon.net/vb/bbs/index.html

違反を報告

■35421 / ResNo.5)

　【注意】ルールをお守りください

▲▼■

□投稿者/ 管理人一般人(1回)-(2023/05/12(Fri) 03:16:45)

えっぴーさんの今までのご投稿（別のお名前でのご投稿もありますが）を拝見させていただくと、明らかに書き込みのルールが守られていません。

書き込みのルールについて
https://dobon.net/vb/bbs/index.html

しかし、それ以前の問題として、No35419 のご投稿は、人を侮辱した内容であり、あまりにひどいです。よって、大変申し訳ありませんが、えっぴーさんのご投稿を一時的に禁止させていただきます。

今後はルールをお守りいただけると約束していただけるのであれば、投稿禁止を解除させていただきますので、その場合は管理人へご連絡ください。

なお、さらなる迷惑行為が行われた場合は、さらに厳しい対応をとらせていただくことになってしまうかもしれませんので、絶対にやめてください。

以上です。よろしくお願いいたします。

違反を報告

Name	/
E-Mail	/
Title	/
URL	/
Comment/ 通常モード->　図表モード-> (適当に改行して下さい/半角10000文字以内)
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）
プレビュー/　クッキーに保存しない/