※ ChatGPTを利用し、要約された質問です（原文：style.displayだと効率悪いから…）
style.displayの効率を改善する方法
このQ&Aのポイント
style.displayを使用する方法では効率が悪いため、他の方法を検討したいです。
document.getElementByIdを毎回書く必要があり、構文が長くなってしまうため、非効率的です。
for文を使用することで、より効率的な方法でstyle.displayを設定することができます。
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全文を書いていただければ幸いです。
お礼
非常に短く簡潔で、わかりやすいです。 ありがとうございます。