HTMLで作ったoptionで駅名を選んで、運賃を計算するには？

Javascript初心者です。まず手始めに、仕事先の給料計算ができるように以下のアプリ（と呼んでいいレベルかはわかりませんが）を作成しています。ネットなどで調べて、何とか給料を計算できるような仕組みになりました。
次は「交通費」の方ですが、optionで並べてあるため、text入力のようには出来ないということには気づきました。
optionの場合は、valueが重要になってくる、とネットで誰かが言ってたのを覚えています。JSの方で、どのようにして計算させることができるでしょうか？　ヒントまたはやり方を教えていただけると助かります。
また、選択肢をoptionで作った場合は、ボタンはHTMLとCSSで作ったものではなくて、<input type="submit"></input>でなければならないという決まりはありますか？
初心者なため、難しい用語は理解できない可能性もありますので、お手柔らかにお願いいたします。
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Wage</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="container">
    <p>どこから</p>
    <select name ="from where">
      <option value="ike">池袋</option>
      <option value="funa">船橋</option>
      <option value="oo">大宮</option>
      <option value="tachi">立川</option>
    </select>
    <p>どこまで</p>
    <select name ="to where">
      <option value="ike">池袋</option>
      <option value="funa">船橋</option>
      <option value="oo">大宮</option>
      <option value="tachi">立川</option>
    </select>
  </div>
  <div id="movecal">交通費を計算する</div>
  <br>
  <div id="calculation">

   <input type="text" id="time" placeholder="何時間働いた？"></input>

     <input type="text" id = "wage" placeholder="時給は？"></input>
  </div>
  <br>
  <div id="classcal">給料を計算する</div>
  <p id="result">ここに結果を表示します</p>

<script src="js/main.js"></script>
</body>
</html>

Javascript

(function() {
'use strict';

var btn = document.getElementById('classcal');
var time = document.getElementById('time');
var wage = document.getElementById('wage');
var result = document.getElementById('result');

btn.addEventListener('click', function() {
 if(wage.value == '' || time.value == ''){
   alert('入力していない項目があります');
   return;
 }
 var howmuch;
 var str;
 howmuch = Math.ceil(wage.value * time.value / 60);
 str = 'あなたの今月の給料は ' + howmuch + '円です。';
 result.textContent = str;
});

})();

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

回答2件

次は「交通費」の方ですが、optionで並べてあるため、text入力のようには出来ないということには気づきました。

optionの場合は、valueが重要になってくる、とネットで誰かが言ってたのを覚えています。JSの方で、どのようにして計算させることができるでしょうか？

経路をoptionタグとかで選択させたら、JavaScriptで経路間の情報をNAVITIME APIとかの、出発、到着地点の駅名から交通費を調べてくれるAPIに投げて、そのAPIが返す結果をJavaScriptで受け取る
そして、その受け取った結果を表示すればいいということになるんじゃねーかな

もし、パターンが新宿～渋谷とか、いくつかのパターンだけで決め打ち可能なら、予めMapとかオブジェクトとか、別ファイルを用意してそこに持っておくとかで一覧として持っておいて、出発地点、到着地点の両方が入力された時点でその一覧から交通費を引っ張ってくればいいんじゃねーかな

また、選択肢をoptionで作った場合は、ボタンはHTMLとCSSで作ったものではなくて、<input type="submit"></input>でなければならないという決まりはありますか？

<input type="submit"></input>は文法違反なのと、これもHTMLとCSSで作られたものですねー
ま、それはおいといて、type=submitである必要はないと思うかなー
だって、今回はJavaScriptだけでやりたいんだから、ページ遷移しちゃったらデータ管理が無駄に面倒じゃん？

結論としては、上で話したとおり。決め打ち可能なら、Mapとかオブジェクトとか別ファイルを用意してそこに持っておくとかで一覧として持っておいて、もし無理ならFetch APIなりXMLHttpRequestなりで交通費計算できそうなAPI叩いてその結果を表示すればいーんじゃねーかな

投稿2019/03/11 20:54

退会済みユーザー

総合スコア0

Asylum35aO2

2019/03/12 14:58

返事が遅れてしまいました。今日はPCをチェックしている余裕がなく、今になってしまいました。いただいたコメントを拝読させていただきます。ありがとうございました。

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

ベストアンサー

がんばれ”アプリ”

javascript
1const
2  A = [...document.querySelectorAll ('select[name$="where"]')],
3  B = new Map ([
4    ['池袋-池袋', 0], ['池袋-船橋', 100],['池袋-大宮', 200],['池袋-立川', 300],
5    ['船橋-池袋', 100], ['船橋-船橋', 0],['船橋-大宮', 100],['船橋-立川', 200],
6    ['大宮-池袋', 200], ['大宮-船橋', 100],['大宮-大宮', 0],['大宮-立川', 100],
7    ['立川-池袋', 300], ['立川-船橋', 200],['立川-大宮', 100],['立川-立川', 0],
8  ]),
9  C = ()=>B.get(A.map(a=>a.options[a.selectedIndex].text.trim()).join('-'))||0,
10  D = document.querySelector ('input[name="koutuuhi"]');
11
12A.forEach (b=>b.addEventListener ('change',()=> D.value = C(),false));

これも追加、value値が大事？

html
1    <select name ="from where">
2      <option>池袋
3      <option>船橋
4      <option>大宮
5      <option>立川
6    </select>
7    <p>どこまで</p>
8    <select name ="to where">
9      <option>池袋
10      <option>船橋
11      <option>大宮
12      <option>立川
13    </select> 
14<input type="text" name="koutuuhi">

投稿2019/03/11 22:04

編集2019/03/11 22:08

退会済みユーザー

総合スコア0

Asylum35aO2

2019/03/12 14:57

返事が遅れてしまい申し訳ありませんでした。本日は今やっといただいた返事を確認することができました。確認して何かありましたらまた連絡させていただきます。ありがとうございました。

Asylum35aO2

2019/03/12 15:54

ありがとうございました。拝読させていただいて難しいところがあったため、もう少々だけご教授いただけると助かります。ひとまず読んだ時の個人的理解を書いてみました。特にCが難しかったです。Dは、要素を代入、入れているだけだと思ったので、下に記入していません。 A = [...document.querySelectorAll ('select[name$="where"]')] HTMLから、whereというキーワードが含まれている要素をJSで所得する。 B = new Map ([ ['池袋-池袋', 0], ['池袋-船橋', 100],['池袋-大宮', 200],['池袋-立川', 300], ['船橋-池袋', 100], ['船橋-船橋', 0],['船橋-大宮', 100],['船橋-立川', 200], ['大宮-池袋', 200], ['大宮-船橋', 100],['大宮-大宮', 0],['大宮-立川', 100], ['立川-池袋', 300], ['立川-船橋', 200],['立川-大宮', 100],['立川-立川', 0], ]), Mapを使用することで、連想配列を定義。 C = ()=>B.get(A.map(a=>a.options[a.selectedIndex].text.trim()).join('-'))||0, アロー関数で、B.get(以降の展開が少しわかりません。ネットでも初心者向けの説明がありませんでした。

退会済みユーザー

2019/03/12 15:57

２つのselect要素の選ばれているoptionのテキストを連結させてMap.getのkeyにする。なかったら０を返す

Asylum35aO2

2019/03/13 16:49

ありがとうございます。だいぶ理解が深まりました。それぞれの要素を再度ネットなどで検索して、さらに向上していきたいと思います。

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

あなたの回答