Q&A
このままではコードが読みづらいので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください
プログラミング初心者で、プログラミング勉強をしています。
javasuriptをドットインストールで軽く勉強して、現在アウトプットとして計算プログラムを作っています。
セレクトボックスで選択した組み合わせごと条件分岐させようとして、つまずいてしまったのですが、質問の回答をいただければ幸いです。
作りたいイメージは、材料とサイズごとの組み合わせで数値の規定値を条件分岐して、最小値と平均値が割っていたら数値を赤くするといった物を作ろうとしています。
現在、なんとか入力した数値を計算するプログラムはできたのですが、セレクトボックスで選択肢した要素を取得して条件分岐する方法がわからないと言った感じです。
HTML
1<!DOCTYPE html> 2<html lang ="ja"> 3<head> 4 <meta charaset ="utf-8"> 5 <title> 検査 </title> 6 <link rel ="stylesheet"href = "css/style.css"> 7</head> 8<body> 9 10 <h1 class ="header">検査</h1> 11 <div class ="box"> 12 <div class="box2"> 13 14 <select id ="material"> 15 <option value ="">検査する材料を選択して下さい</option> 16 <option value = "1">材料A</option> 17 <option value = "2">材料B</option> 18 </select> 19 20 21 <select id ="size"> 22 <option value ="">サイズを選択してください</option> 23 <option value = "100size"">サイズ100</option> 24 <option value = "150size">サイズ150</option> 25 <option value = "200size">サイズ200</option> 26 </select> 27 </div> 28 29 <div class="container"> 30 <p><label for="min">最小値を入力して下さい<br> 31 <input type ="text"id="min"> 32 </p> 33 34 <p><label for="max">最大値を入力して下さい<br> 35 <input type ="text"id="max"> 36 </p> 37 38 </div> 39 40 <div id ="exeucution">実行</div> 41 42 <div id = "average">0</div> 43 <div id = "unevennessrate">0</div> 44 </div> 45 46 <script src ="js/main.js"></script> 47</body> 48</html> 49
javascrip
1//セレクトボックス１ 2 const a = document.getElementById('material').options[1].value = '1'; //材料A 3 a.classList.add('a1'); 4 const b = document.getElementById('material') .options[2].value = '2'; //材料B 5 b.classList.add('b2'); 6 7 //セレクトボックス２ 8 const s = document.getElementById('size').options[1].value = '100size'; 9 s.classlist.add('100'); 10 11 const h = document.getElementById('size').options[2].value = '150size'; 12 h.classList.add('150'); 13 14 const Z = document.getElementById('size').options[3].value = '200size'; 15 z.classList.add('200'); 16 17 //計算 18 const x = 2; 19 const v = 100; 20 var exeucution = document.getElementById('exeucution'); 21 exeucution.addEventListener('click',() =>{ 22 let min = document.getElementById('min').value; 23 let max = document.getElementById('max').value 24 let xx = (parseFloat(min,10) + parseFloat(max,10)) 25 let sum = parseFloat(xx,10) / parseFloat(x,10); 26 27 let average = document.getElementById('average'); 28 average.textContent = sum; 29 30 let vv = parseFloat(min,10) / parseFloat(max,10); 31 let sum2 = parseFloat(vv,10) * parseFloat(v,10); 32 33 let unevennessrate = document.getElementById('unevennessrate'); 34 unevennessrate.textContent = sum2.toFixed(1); 35 36 }); 37 38} 39
試したこと
セレクトボックスで選択肢を選択したらクラスをつけて、ifブロックでクラスごとに条件分岐をすればいけるのではないかと思いセレクトボックスのところのjavascriptのコードを自分なりに書いてみました。
途中まで書いてみたもののセレクトボックスで選択した値を取得して、その組み合わせごとに条件を分岐させるイメージが全く思い浮かばず悩んでいます。
回答1件
0
ベストアンサー
参照の仕方がおかしいのとtypoに気をつけましょう
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const a = document.querySelector('#material option[value="1"]'); 4 a.classList.add('a1'); 5 const b = document.querySelector('#material option[value="2"]'); 6 b.classList.add('b2'); 7 const s = document.querySelector('#size option[value="100size"]'); 8 s.classList.add('100'); 9 const h = document.querySelector('#size option[value="150size"]'); 10 h.classList.add('150'); 11 const z = document.querySelector('#size option[value="200size"]'); 12 z.classList.add('200'); 13}); 14</script> 15<div id='container'> 16<select id ="material"> 17<option value ="">検査する材料を選択して下さい</option> 18<option value = "1">材料A</option> 19<option value = "2">材料B</option> 20</select> 21<select id ="size"> 22<option value ="">サイズを選択してください</option> 23<option value = "100size">サイズ100</option> 24<option value = "150size">サイズ150</option> 25<option value = "200size">サイズ200</option> 26</select> 27</div>
投稿2019/11/11 00:26
総合スコア114837
あなたの回答
tips
プレビュー
