出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。
具体的には{ name:["A", "B"], distance: 1.5,between:1}に対して、{ between:1,fare:170 }と返るようにしたいです。
実装方法がわからないです。
また、これらをifで分岐させたいです。どうしたらいいのでしょうか。
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4 …
<script>
/**
* distance : 区間距離(km)
* name : 区間名
* price : 区間における乗車運賃
*/
const price_table = [
{ distance: 0, name: '見送り', price: { normal: 120, child: 60 } },
{ distance: 3, name: '1区間', price: { normal: 150, child: 80 } }, ];
/**
* name: '駅名'
* distance: 次の駅までの距離
*/
const stations = [
{ name: 'A', distance: 1.5 },
{ name: 'B', distance: 1.5 },
];
</script>
<script>
$(function () {
$(document).on('change', function () {
var f = $('[name=from]').val();
var t = $('[name=to]').val();
// 何番目の駅かを探す
let from_idx = stations.findIndex(station => station.name == f);
let to_idx = stations.findIndex(station => station.name == t);
// from, to が昇順になるようにする。
let from_to = [from_idx, to_idx].sort();
// どちらかが未入力の場合、もしくは駅名が見つからない場合は処理を受け付けないようにする。
if (from_to[0] < 0) {
return;
}
// 駅間の距離を加算する。
let d = 0;
for (let i = from_to[0]; i < from_to[1]; i++) {
d += stations[i].distance;
}
// 距離の合計値による料金テーブルを探す
const period = price_table.find(price => d <= price.distance);
$('span[name=distance]').html(d);
$('span[name=kukan]').html(period.name);
$('span[name=price]').html(period.price.normal);
});
});
</script>
</head>
<body>
<div>
出発駅:
<select name="from">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div>
到着駅略
</div>
距離:<span name="distance"></span>km<br />
区間:<span name="kukan"></span><br />
料金:<span name="price"></span>円
</body>
</html>
jsのプログラムサイトをいろいろ調べてみましたが、グッとくるものはなかったです。
No.1ベストアンサー
- 回答日時:
> 出発駅A、到着駅Bを選択すると、2.3㎞と170円と返る
駅情報や料金表を訂正しましょう
例) AB 間を 1.5km から 2.3km に変更
例) 3km 以下の料金を 150 円から 170 円に変更
> { name:["A", "B"], ... }に対して、{ between:1,fare:170 }と返る
処理の入出力を HTML 読み書きではなく JSON にしましょう
例)
function 処理(param) {
_ var f = param.name[0], t = param.name[1]; // $.val() を使わない
_ ...
_ return { // $.html() を使わない
_ _ beetween:Math.abs(from_idx-to_idx),
_ _ fare:period.price.normal,
_ };
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 3 2023/12/17 01:07
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript JavaScriptで作ったアプリが正常に動作しない。改善したい。 3 2024/01/06 16:33
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
プログラミング言語の制作方法について
C言語・C++・C#
-
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
列のどこをクリックしてもソートできるようにするには
HTML・CSS
-
-
4
これなにがちがうんですか??
C言語・C++・C#
-
5
ホワイトハッカー
その他(プログラミング・Web制作)
-
6
IT業界より楽に稼げる業界ってあるんですか?銀行とか?
その他(プログラミング・Web制作)
-
7
WindowsのCapsLock(キャップスロック)って、何の意味があるんですか?
C言語・C++・C#
-
8
C++6.0でのresource.hについて
C言語・C++・C#
-
9
Excelで「Ctrl+c」、「Ctrl+v」等をまとめた物
Visual Basic(VBA)
-
10
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
11
VBEを開くのにコマンド名が「Visual Basic」な理由はなぜ?
Visual Basic(VBA)
-
12
擬似コード
C言語・C++・C#
-
13
終端記号、非終端記号とは
C言語・C++・C#
-
14
chatgptでつくってもらったコードとかって頭のいい人はみるとわかりますか?
C言語・C++・C#
-
15
コードを直していただきたいです。 以下のコードはネットで拾ったものをほんの少しいじった物なのですが、
Visual Basic(VBA)
-
16
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
17
ものづくりに向いているプログラミング言語ってなんですか?家電にもプログラミングが使われてるとか
その他(プログラミング・Web制作)
-
18
オススメのプログラミングスクールあればお聞きしたいです。 ・PHPを学べる ・ポートフォリオ作成でき
PHP
-
19
LeetCodeていうの初めて、
C言語・C++・C#
-
20
HTML入門でもう躓いてしまった。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリアをenterキーでフ...
-
テキストボックスの値同士を比...
-
ラジオボタンでクリックした値...
-
jqueryでtextareaのcols、rows...
-
submitボタン押下時にPOSTされ...
-
【jQuery】input nameの文字列...
-
Javascriptでのbuttonのname属...
-
カーソルが自動的に移動する方法
-
JavaScriptにて動的に配列を作...
-
javascriptの値をformのinput h...
-
cookie使用時にundefinedと表示...
-
テキストボックスの入力をリセット
-
新しくフォルダを作成したい
-
return trueとreturn falseの用...
-
テキストボックス入力を半角英...
-
onClick="this.form.submit
-
<JavaScript>tableタグを入力不...
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
正規表現で複数マッチ条件で悩...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
新しくフォルダを作成したい
-
Javascriptでのbuttonのname属...
-
ファイル選択ダイアログが表示...
-
出発駅A、到着駅Bを選択すると...
-
テキストボックスの入力をリセット
-
JavaScriptにて動的に配列を作...
-
submitボタン押下時にPOSTされ...
-
ボタンを押すとテキストボック...
-
ラジオボタンでクリックした値...
-
二つの入力欄に、同時に同じ文...
-
テキストボックスの値同士を比...
-
name属性のないformタグの、中...
-
ASP.NETでNAME属性を固定にしたい
-
複数のテキストフィールドを同...
-
フォームの一部をPOSTで送信で...
-
テキストエリアをenterキーでフ...
-
動的にTabindexの値を変えたい!
-
GETパラメータの内、空文字のク...
おすすめ情報