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

Question

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');
  }
}

Answer 1

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

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();に変更しています。

<div class="group_outer">
  <h2 class="legend">現在の年齢</h2>
  <div class="input">
    <select id="x002" name="002" title="現在の年齢" onchange="display_ege()" 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="x003" name="003"">
      <option value="">--なし--</option>
      <option value=" はい">はい</option>
      <option value="いいえ">いいえ</option>
    </select>
  </div>
</div>

<script>
  function display_ege() {

    let element = $('#x002').val();

    if (element == "18" || element == "19" | element == "20") {
      $('.high_school_student').addClass('active');
    } else {
      $('.high_school_student').removeClass('active');
    }
  }
</script>

Comments

[kato00]

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

Answer 2

classを使ってやると楽です

<style>
.hide{display:none;}
</style>
<script>
document.addEventListener('change',()=>{
  document.querySelector('.high_school_student').classList.toggle('hide',!["18","19","20"].includes(document.querySelector('[id="002"]').value));
})
</script>
<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 hide">
    <div class="group_outer">
        <select  id="003" name="003" >
            <option value="">--なし--</option>
            <option value="はい">はい</option>
            <option value="いいえ">いいえ</option>
        </select>
    </div>
</div>