プルダウンの選択肢によって、表示非表示を切り替えたい

js初心者です。

年齢を選択するプルダウンから、「18、19、20」が選択された場合に、

<div class="high_school_student">を表示させたいです。

四苦八苦しながら一日かけて調べて、下記コードを記述したのですが、
動きません、、

何が原因でしょうか？
他必要な情報あれば追記します。
宜しくお願い致します。

<div class="group_outer">
    <h2 class="legend">現在の年齢</h2>
    <div class="input">
        <select  id="002" name="002" title="現在の年齢" required>
            <option value="">--なし--</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15" selected>15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>
    </div>
</div>

<div class="high_school_student">
    <div class="group_outer">
        <select  id="003" name="003" >
            <option value="">--なし--</option>
            <option value="はい">はい</option>
            <option value="いいえ">いいえ</option>
        </select>
    </div>
</div>

.high_school_student{
    display: none;
}

.active{
    display: block;
}

function display_ege(){
    
let element = document.getElementById('002');
    
if(element=="18"||element=="19"|element=="20"){ 
    $('.high_school_student').addClass('active');
} else {
    $('.high_school_student').removeClass('active');
  }
}

回答2件

ベストアンサー

コードを見る限り、かなり勉強不足かなと思います。

JavaScriptの基礎以前に、
HTMLの一番基礎から理解が足りていないようです。

やりたいことからぶつかってみるのも良いことですが、
ある程度の基礎をおさえずにここまで作り込んでしまうと、
原因が多すぎて自分では要因が特定できなくなってしまいますよ。

記載コードには間違いが3つあります。

(1)
まずHTMLの基本ルールとして、idの先頭に数字は利用できません。

なので下記コードでは002をx002、
003をx003に変えています。

(2)
display_ege()が定義されていますが、
どこからも呼び出されていないので、意味のないコードになっています。

なので下記コードでは#x002にonchange="display_ege()"を追加しています。
onchangeの意味は調べてください。

(3)
let element = document.getElementById('002');は、
Elementオブジェクトを指定しているだけになるので、
selectedの値を取得することにはなりません。

なので下記コードではlet element = $('#x002').val();に変更しています。

js
1<div class="group_outer">
2  <h2 class="legend">現在の年齢</h2>
3  <div class="input">
4    <select id="x002" name="002" title="現在の年齢" onchange="display_ege()" required>
5      <option value="">--なし--</option>
6      <option value=" 6">6</option>
7      <option value="7">7</option>
8      <option value="8">8</option>
9      <option value="9">9</option>
10      <option value="10">10</option>
11      <option value="11">11</option>
12      <option value="12">12</option>
13      <option value="13">13</option>
14      <option value="14">14</option>
15      <option value="15" selected>15</option>
16      <option value="16">16</option>
17      <option value="17">17</option>
18      <option value="18">18</option>
19      <option value="19">19</option>
20      <option value="20">20</option>
21    </select>
22  </div>
23</div>
24
25<div class="high_school_student">
26  <div class="group_outer">
27    <select id="x003" name="003"">
28      <option value="">--なし--</option>
29      <option value=" はい">はい</option>
30      <option value="いいえ">いいえ</option>
31    </select>
32  </div>
33</div>
34
35<script>
36  function display_ege() {
37
38    let element = $('#x002').val();
39
40    if (element == "18" || element == "19" | element == "20") {
41      $('.high_school_student').addClass('active');
42    } else {
43      $('.high_school_student').removeClass('active');
44    }
45  }
46</script>

投稿2023/03/31 07:06

NKTIDKSG

総合スコア662

回答へのコメント

kato00

2023/03/31 07:57

ありがとうございます！動きました！だいぶコーディングから離れていたため（jsも年1くらいしか触らない）基礎も結構忘れておりまして。 IDは仮で入れておりました。失礼しました。

classを使ってやると楽です

javascript
1<style>
2.hide{display:none;}
3</style>
4<script>
5document.addEventListener('change',()=>{
6  document.querySelector('.high_school_student').classList.toggle('hide',!["18","19","20"].includes(document.querySelector('[id="002"]').value));
7})
8</script>
9<div class="group_outer">
10    <h2 class="legend">現在の年齢</h2>
11    <div class="input">
12        <select  id="002" name="002" title="現在の年齢" required>
13            <option value="">--なし--</option>
14            <option value="6">6</option>
15            <option value="7">7</option>
16            <option value="8">8</option>
17            <option value="9">9</option>
18            <option value="10">10</option>
19            <option value="11">11</option>
20            <option value="12">12</option>
21            <option value="13">13</option>
22            <option value="14">14</option>
23            <option value="15" selected>15</option>
24            <option value="16">16</option>
25            <option value="17">17</option>
26            <option value="18">18</option>
27            <option value="19">19</option>
28            <option value="20">20</option>
29        </select>
30    </div>
31</div>
32
33<div class="high_school_student hide">
34    <div class="group_outer">
35        <select  id="003" name="003" >
36            <option value="">--なし--</option>
37            <option value="はい">はい</option>
38            <option value="いいえ">いいえ</option>
39        </select>
40    </div>
41</div>