jsで、セレクトボックスで２つ駅を選択します。駅間距離から運賃を割り出すプログラム。

jsで、セレクトボックスで２つ駅を選択します。駅間距離から運賃を割り出すプログラム。
jsで、まず、例えば、セレクトボックスに東京駅、品川駅、川崎駅、横浜駅などとデータを入れておきます。
それは、2つともです。
その場合、例えば、東京駅と横浜駅と選択した場合に、28.8kmと出力。
そこから、運賃を計算し、例えば、1～3㎞であれば140円、4～6㎞であれば160円というように、計算するプログラムを出します。
この場合は、まず、constで、東京駅と横浜駅を選択した場合に、28.8kmと出力できるように設定。
そのあと、各鉄道会社の運賃計算の手法にのっとって切り上げを行って、
Math.round(<数値>)
ex1) Math.round(123.456) // 出力：123を使って、29に切り上げ、
さらにif関数で1>x>3で、140、4>x>6で、160と出るように設定すればいいのはわかっています。
これを、jsで表現するには、どういう表現方法が望ましいですか。
a0とb0を選択したら、abcdefgを表示するプログラムができました。
あとは、a0とb0を選択した場合に、1.2なり、1.5なりという（ここは適宜変える）変数が与えられるように仕組み付けし、
それをif関数の判定を用いて、0>a>2（ここは会社によって違うため適宜変える）の時に、150円なり、170円なりすればいいと思うのですが、そのプログラムの構築の仕方が判りません。
html文はそのまま、js文（html文に直書き）は付け足しで行けると思います。どうすればいいでしょうか。能力なき者泣き寝入りせざるを得ませんか。
以下はそのhtml文です。
<select name="A">
<option value="">--
<option value="a0">a0
<option value="a1">a1
<option value="a2">a2
</select>

<select name="B"> <option value="">-- <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> <p></p> <script> const mess = { 'a0b0': 'abcdefg', 'a0b1': 'hijklmn', }; document.addEventListener ('change', ()=> { let sels = document.querySelectorAll ('select[name="A"],select[name="B"]'); let key = [...sels].map (s=> s.value).join (''); document.querySelector('p').textContent = mess[key] || ''; }); </script>

Lhankor_Mhy

2022/06/23 00:54

markdownを使ってソースコードを書いてください。 https://teratail.com/help/question-tips#questionTips37 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494 https://teratail.com/questions/238564

行動規範の内容に同意します

回答2件

ベストアンサー

if 文を使わずに、Array.findIndex を使います

html&js
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title></title>
4<style>
5</style>
6
7<body>
8<p id=A>
9<select id=B>
10	<option value="">--
11	<option value="a0">a0
12	<option value="a1">a1
13	<option value="a2">a2
14</select>
15
16<select id=C>
17	<option value="">--
18	<option value="b0">b0
19	<option value="b1">b1
20	<option value="b2">b2
21</select>
22</p>
23<p id=D></p>
24
25<script>
26const
27  vals = {
28  	'a0b0': 1.2,
29    'a0b1': 12,
30    'a0b2': 28.8,
31  },
32  len = [  3,  6,  15,  30,  50],
33  prc = [140,160, 200, 250, 500],
34  f=(_,l=Math.round(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':'';
35
36A.addEventListener('change',_=>f(vals[B.value+C.value]));
37
38</script>
39