コードを見る限り、かなり勉強不足かなと思います。
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>
0 コメント