こんばんは。
初心者で恐縮な質問なんですが、selectboxに関してです。
###前提・実現したいこと
4つのselectboxの値を計算して結果をボタンを押して表示させる。
保険資産の数十パターンの見積もりのために作ってるのですが、詰まってしまいました。
下記は途中まで書いたコードです。
###ソースコード
javascript
1 function goShisan() { 2 3var tanka = [ 4 [6.5 , 10.6], 5 [6.5 , 13], 6 [8.4 , 16.5], 7 [11.8 , 24.4], 8 [11.8 , 27.9], 9 [13.6 , 24.4], 10 [20.2 , 32.6] 11]; 12 13var mySelectname1 = document.shisanForm.where.selectedIndex; 14var whereNAME = document.shisanForm.where.options[mySelectname1].text; 15 16var mySelectname2 = document.shisanForm.kouzou.selectedIndex; 17var kouzouNAME = document.shisanForm.kouzou.options[mySelectname2].text; 18var mySelect1 = document.shisanForm.where.selectedIndex; 19var whereID = parseInt(document.shisanForm.where.options[mySelect1].value); 20var mySelect2 = document.shisanForm.kouzou.selectedIndex; 21var kouzouID = parseInt(document.shisanForm.kouzou.options[mySelect2].value); 22 23var tankaKKK = tanka[ whereID - 1 ][ kouzouID - 1]; 24 25var mySelect3 = document.shisanForm.tatemono.selectedIndex; 26var tatemonoKKK = parseInt(document.shisanForm.tatemono.options[mySelect3].value); 27var mySelect4 = document.shisanForm.kazai.selectedIndex; 28var kazaiKKK = parseInt(document.shisanForm.kazai.options[mySelect4].value); 29 30 31document.getElementById('tatemonoKKKoutput').innerHTML = tatemonoKKK.toLocaleString(); 32document.getElementById('kazaiKKKoutput').innerHTML = kazaiKKK; 33 34 35var tatemonoKKKTTL = parseInt(tatemonoKKK * tankaKKK); 36tatemonoKKKTTL = tatemonoKKKTTL / 10; 37tatemonoKKKTTL = Math.round(tatemonoKKKTTL) * 10; 38var kazaiKKKTTL = parseInt(kazaiKKK * tankaKKK); 39kazaiKKKTTL = kazaiKKKTTL / 10; 40kazaiKKKTTL = Math.round(kazaiKKKTTL) * 10; 41var allTTL = tatemonoKKKTTL + kazaiKKKTTL; 42 43 44document.getElementById('whereoutput').innerHTML = whereNAME; 45document.getElementById('kouzououtput').innerHTML = kouzouNAME; 46document.getElementById('idoutput').innerHTML = "" + whereID + "" + kouzouID; 47document.getElementById('tatemonooutput').innerHTML = tatemonoKKKTTL.toLocaleString(); 48document.getElementById('kazaioutput').innerHTML = kazaiKKKTTL.toLocaleString(); 49document.getElementById('alloutput').innerHTML = allTTL.toLocaleString(); 50 51 } 52 53
HTML
1<div style="margin-top: 20px;"> 2<form name="shisanForm" style="font-size: 14px; font-weight: bold;"> 3<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px;">建物の所在地: 4<select name="where" onChange="goShisan()"> 5<option value="3">北海道</option> 6<option value="3">青森県</option> 7<option value="1">岩手県</option> 8<option value="3">宮城県</option> 9<option value="1">秋田県</option> 10<option value="1">山形県</option> 11<option value="2">福島県</option> 12<option value="4">茨城県</option> 13<option value="1">栃木県</option> 14<option value="1">群馬県</option> 15<option value="6">埼玉県</option> 16<option value="7">千葉県</option> 17<option value="7">東京都</option> 18<option value="7">神奈川県</option> 19<option value="3">新潟県</option> 20<option value="1">富山県</option> 21<option value="1">石川県</option> 22<option value="1">福井県</option> 23<option value="3">山梨県</option> 24<option value="1">長野県</option> 25<option value="3">岐阜県</option> 26<option value="7">静岡県</option> 27<option value="7">愛知県</option> 28<option value="7">三重県</option> 29<option value="1">滋賀県</option> 30<option value="3">京都府</option> 31<option value="6">大阪府</option> 32<option value="3">兵庫県</option> 33<option value="3">奈良県</option> 34<option value="7">和歌山県</option> 35<option value="1">鳥取県</option> 36<option value="1">島根県</option> 37<option value="1">岡山県</option> 38<option value="1">広島県</option> 39<option value="1">山口県</option> 40<option value="5">徳島県</option> 41<option value="3">香川県</option> 42<option value="4">愛媛県</option> 43<option value="5">高知県</option> 44<option value="1">福岡県</option> 45<option value="1">佐賀県</option> 46<option value="1">長崎県</option> 47<option value="1">熊本県</option> 48<option value="3">大分県</option> 49<option value="3">宮崎県</option> 50<option value="1">鹿児島県</option> 51<option value="3">沖縄県</option> 52</select> 53</div> 54 55<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物の構造種別: 56<select name="kouzou" onChange="goShisan()"> 57<option value="1">M</option> 58<option value="1">T</option> 59<option value="2">H</option> 60</select> 61</div> 62 63<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物保険金額: 64<select name="tatemono" onChange="goShisan()"> 65<option value="500">1,000万円</option> 66<option value="750">1,500万円</option> 67<option value="1000">2,000万円</option> 68<option value="1500">3,000万円</option> 69</select> 70</div> 71 72<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">家財保険金額: 73<select name="kazai" onChange="goShisan()"> 74<option value="0">補償なし</option> 75<option value="150">300万円</option> 76<option value="250">500万円</option> 77</select> 78</div> 79 80 81</div> 82 83<br style="clear: both;"> 84 85<div style="padding-top: 20px; margin-top: 20px; border-top: #ccc 1px solid;"> 86 <div style="padding: 10px; background-color: #ffc; font-size: 14px; color: #900; font-weight: bold;"><span id="whereoutput">北海道</span>、<span id="kouzououtput">M構造</span>の建物の地震保険料<span style="font-weight: normal; size: 12px;">(ID:<span id="idoutput">31</span>)</span></div> 87 <div style="width: 350px; border: #ccc 1px solid; float: left; margin-top: 20px;"> 88 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">補償内容</div> 89 <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物の補償額:最大 <span id="tatemonoKKKoutput" style="font-size: 18px; font-weight: bold;">500</span> 万円</div> 90 <div style="margin: 10px;">家財の補償額:最大 <span id="kazaiKKKoutput" style="font-size: 18px; font-weight: bold;">0</span> 万円</div> 91 </div> 92 <div style="width: 350px; border: #ccc 1px solid; float: left; margin: 20px 0 0 20px;"> 93 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">保険料</div> 94 <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物地震保険料: <span id="tatemonooutput" style="font-size: 18px; color: #d00; font-weight: bold;">4,200</span> 円</div> 95 <div style="margin: 10px; border-bottom: #bbb 1px solid; padding-bottom: 10px;">家財地震保険料: <span id="kazaioutput" style="font-size: 18px; color: #d00; font-weight: bold;">0</span> 円</div> 96 <div style="margin: 10px;"><span style="font-size: 20px; font-weight: bold;">地震保険料: <span id="alloutput" style="color: #d00; font-size: 26px;">4,200</span> 円</span></div> 97 </div> 98 99</div> 100 101
###アドバイス等いただけたら幸いです。よろしくお願いいたします。
お手数ですが、どこまであっているかわからないコードを見ても「どう計算するのが正解なのか」わかりません。計算の方法を提示してください。
計算の方法はこれで合っています。不足部分は、
ー何回も同じことを書いてるので、何かjqueryでいい書き方はないか。
ーボタンを押して結果を表示させたい。
この二点です。
申し訳ないが、適切なインデントもされていないようなソースコードを読んでまでの回答は作業量が多すぎてボランティアでやるつもりはありません。
(所在地)x (???)= (保険料) のように記述してください。