0

2つの駅を選択すると運賃などの情報が計算されて表示されるようにJavaScriptで実装したいです。

運賃は2つの駅の距離に連動しています。
現状のプログラムでは、たとえば中百舌鳥と深井を選択したら、間の距離を3.7㎞と計算して、そこから3.7㎞の場合は運賃はいくらかというのが出せるところまではできています。この場合は190円です。

ですが、そこから先、その運賃と連動して、通勤定期、通学定期の額を紐づけて額を出したいのです。

ちなみに、能勢電鉄のHPでは、A駅とB駅との間の距離と運賃はすでに設定されていますが、
通勤、通学の部分は、選択しない限り値が出てこない状況です。
しかし、システム的には紐づいており、距離と運賃が出れば、通勤、通学が出るようになります。

能勢電鉄のHP
https://noseden.hankyu.co.jp/railway/

以下が2つ駅を選択しないと運賃が出ないようなプログラムです。これは、2つ駅を選択するとこのパターンの時は、この距離と計算し、その距離に符合する運賃を出すというプログラムです。

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<style>
</style>

<body>
<p id=A>
<select id=B>
    <option value="">--
        <option value="sb01">中百舌鳥
    <option value="sb02">深井
    <option value="sb03">泉ケ丘
        <option value="sb04">栂・美木多
    <option value="sb05">光明池
    <option value="a0">a0
    <option value="a1">a1
    <option value="a2">a2
</select>

<select id=C>
    <option value="">--
        <option value="sb01">中百舌鳥
    <option value="sb02">深井
    <option value="sb03">泉ケ丘
        <option value="sb04">栂・美木多
    <option value="sb05">光明池
    <option value="b0">b0
    <option value="b1">b1
    <option value="b2">b2
</select>
</p>
<p id=D></p>

<script>

const vals = {
    'sb01sb02':3.7,
    'sb01sb03':7.8,
    'sb01sb04':10.2,
    'sb01sb05':12.1,
    'sb02sb03':4.1,
    'sb02sb04':6.5,
    'sb02sb05':8.4,
    'sb03sb04':2.4,
    'sb03sb05':4.3,
    'sb04sb05':1.9,
    'a0b0': 1.2,
    'a0b1': 12,
    'a0b2': 28.8,
  },
  len = [1,2,4,6,8,10,12,14,16],
  prc = ['運賃170(90),回数券1,700(900),通勤_1か月6,540(3,270)_3か月18,640(9,320)_6か月35,320(17,660),通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370(8,190)',
'運賃170(90),回数券1,700(900),通勤_1か月6,540(3,270)_3か月18,640(9,320)_6か月35,320(17,660),通学_1か月3,030(1,520)_3か月8,640(4,320)_6か月_16,370(8,190)',
'運賃190(100),回数券1,900(1,000),通勤_1か月7,360(3,680)_3か月20,980(10,490)_6か月39,750(19,880),通学_1か月3,470(1,700)_3か月9,690(4,850)_6か月_18,360(9,180)',
'運賃210(110),回数券2,100(1,100),通勤_1か月8,180(4,090)_3か月23,320(11,680)_6か月44,180(22,090),通学_1か月3,780(1,890)_3か月10,780(5,390)_6か月_20,420(10,210)',
'運賃230(120),回数券2,300(1,200),通勤_1か月8,990(4,500)_3か月25,630(12,820)_6か月48,550(24,280),通学_1か月4,160(2,080)_3か月11,860(5,930)_6か月_22,470(11,240)',
'運賃250(130),回数券2,500(1,300),通勤_1か月9,810(4,910)_3か月27,960(13,980)_6か月52,980(26,490),通学_1か月4,530(2,270)_3か月12,920(6,460)_6か月_24,470(12,240)',
'運賃270(140),回数券2,700(1,400),通勤_1か月10,620(5,310)_3か月30,270(15,140)_6か月57,350(28,680),通学_1か月4,910(2,460)_3か月14,000(7,000)_6か月_26,520(13,260)',
'運賃290(150),回数券2,900(1,500),通勤_1か月11,450(5,730)_3か月32,840(16,320)_6か月52,980(30,920),通学_1か月5,290(2,650)_3か月15,080(7,540)_6か月_28,570(14,290)'],
  f=(_,l=Math.floor(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':'';
A.addEventListener('change',_=>f(vals[(_=B.value)+(__=C.value)]||vals[__+_]));

</script>

自分がやったのは、prcとf=の部分を2回記述したのと、prcを2回記述して、f=(,l=Math.floor())=>D.textContent=l?prc[len.findIndex(=>>l)]+f=(,l=Math.floor())=>D.textContent=l?prc[len.findIndex(=>>l)]+'円':'';、
そして、同じくprcは2回記述しますが、f=の部分を省いたバージョンのを書きましたが、
運賃と定期(運賃)を分割して表示したいです。
jsの部分を省略せずに教えてください。
構文だけをお書きになった場合、その構文をどこに入れたらいいのかや、追加の構文が必要であったりするのです。
僕にはその辺の想像力が欠如しています。

2
  • teratail.com/questions/a30by93kqneniy の質問と同じでしょうか?
    – merino
    Commented 2022年6月27日 13:10
  • 1
    能勢電鉄のHPとの関連がよく分からなかったです。能勢電鉄のHPには既に2つ駅を選択すると運賃や定期券代金の出る仕組みがありますが、これと同じようなものを実装したく参考にしたという意味で合っていますか?
    – nekketsuuu
    Commented 2022年6月27日 14:16

1 件の回答 1

1

大まかなアドバイス

1 次元の構造しか使わないのをやめて、2次元の配列にしてみたり object の中に object を入れてみたりしましょう。データとデータを結び付けている構造を見抜き、その構造に沿ってデータを格納するようにすると、処理がしやすくなります。

たとえば 2 駅間の距離を格納するには、1 次元の object ではなく 2 次元 の object を使うようにすると便利です。紙の運賃表のように縦横にマスが広がってそれぞれのマスに運賃が書かれている様子をイメージしてください。

const distances = {
  'sb01': {
    'sb02': 3.7,
    'sb03': 7.8,
    'sb04': 10.2,
    'sb05': 12.1
  },
  'sb02': {
    'sb03': 4.1,
    'sb04': 6.5,
    'sb05': 8.4
  },
  // 中略します
};

こう書いておくと、sb01 から sb02 までの距離は distances['sb01']['sb02'] で出せるようになります。

距離から運賃を出す部分についても、すべてを文字列にして格納するのではなくて、それぞれのデータだけを object として保存しておき、データを元に後から文字列を作るようにすると良いです。

const prices = {
  1: {
    'ticket': {
      'adult': 170,
      'child': 90
    },
    'bookOfTicket': {
      'adult': 1700,
      'child': 900
    },
    'commutationTicket': {
      'oneMonth': {
        'adult': 6540,
        'child': 3270
      },
      'threeMonths': {
        'adult': 18640,
        'child': 9320,
      },
      'sixMonths': {
        'adult': 35320,
        'child': 17660
      }
    },
    'studentTicket': {
      'oneMonth': {
        'adult': 3030,
        'child': 1520
      },
      'threeMonths': {
        'adult': 8640,
        'child': 4320,
      },
      'sixMonths': {
        'adult': 16370,
        'child': 8190
      }
    }
  },
  // 長くなるので以下省略します。
}

また、もし距離から各種運賃を求めるのが数式で行えるのであれば、このようにデータとして保存しておくのではなくて、関数を作って毎回計算するようにする方が打ち間違いなどを防げて良いです。

2
  • 「変数 A というものは定義されていません。もしこれが HTML の方の <p id=A> と書かれている部分を指しているつもりであれば、これはそのようには動かない」 -> これは実は動いてしまう上に仕様にもなっています。試してみて下さい。
    – mjy
    Commented 2022年6月27日 15:48
  • えええ私の環境で動かなかったのは何だったんだ……。すいません、削除しました。
    – nekketsuuu
    Commented 2022年6月28日 1:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。