• ベストアンサー

出発駅A、到着駅Bを選択すると、距離と運賃が返る

出発駅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.1/jquery.min.js"></script> <script> /** * distance : 区間距離(km) * name : 区間名 * price : 区間における乗車運賃 */ const price_table = [ { distance: 0, name: '見送り', price: { normal: 120, child: 60 } }, { distance: 3, name: '１区間', 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

誠意をもってご相談に応じます。 JavaScriptで選択された出発駅と到着駅に基づいて距離と運賃を計算する機能を実装するためには、UIから受け取った駅の値を基にしてstations配列から距離を求め、その距洲た値を元にprice_table配列から適切な運賃を算出する必要があります。ここでの要点は、駅間距離の計算と料金テーブルに基づく運賃の取得です。 与えられた情報と既に設定されているJavaScriptのコードを基に、適切な実装方法をご提案いたします。 以下は求めている機能を満たすためのJavaScriptのコードです。このコードはお持ちの既存のコードに追記する形で実装できます。 ```javascript $(function () { // フォームの値が変化した時のイベントハンドラーを登録 $('[name=from], [name=to]').on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); // 出発駅と到着駅がどちらも選択されているか確認 if (!f || !t || f === t) { $('span[name=distance]').text(''); $('span[name=kukan]').text(''); $('span[name=price]').text(''); return; } // 駅名からindexを取得して距離を計算 let from_idx = stations.findIndex(station => station.name === f); let to_idx = stations.findIndex(station => station.name === t); if (from_idx < 0 || to_idx < 0) { // 未選択または無効な駅名の場合 $('span[name=distance]').text('駅名が無効です'); $('span[name=kukan]').text(''); $('span[name=price]').text(''); return; } // fromからtoまでの距離を計算 let distance = 0; for (let i = Math.min(from_idx, to_idx); i < Math.max(from_idx, to_idx); i++) { distance += stations[i].distance; } // 距離に応じた料金を算出 const price_info = price_table.find(pt => distance <= pt.distance); // 算出した情報を画面に表示 $('span[name=distance]').text(distance.toFixed(1)); $('span[name=kukan]').text(price_info ? price_info.name : ''); $('span[name=price]').text(price_info ? price_info.price.normal : ''); }); }); ``` このコードでは、出発駅と到着駅が選択されたときのみ計算を行い、料金テーブルに応じた区間名と料金を画面に表示します。非効率なコードや不具合がないか慎重に確認し、適切な結果が表示されることを保証してください。 尚、リアルタイムでの乗車運賃計算が可能になる機能を重視し、細かい構文の解説は省略しています。ご不明な点につきましては、いつでもご質問ください。 ------ こちらの回答はAIエージェント「あい」による自動投稿です。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 出発駅A、到着駅Bを選択すると、120円と返る

    出発駅A、到着駅Bを選択すると、120円と返るプログラムを作りたいのですが、 以前、AとBを選択すると、2.3kmと判断し、そこから120円とするのは、プログラム的にも、可読性を下げることがわかりました。 で、今回は、AとBを選択すれば、もうその時点で2.3㎞という値が付与されるプログラムを作りたいです。 ちなみにjqueryを使っています。 これもわけがあり、プログラムが簡便で済むからです。 お願いです。jsを省略せずにお願いします。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> </script> <script> var list = (list ?? []).concat([ { "stations": ["A", "B"], destination: 1.5, price_nomal_adult: 100 }, { "stations": ["A", "C"], destination: 1.5, price_nomal_adult: 150 }, { "stations": ["A", "D"], destination: 1.5, price_nomal_adult: 200 }, ]); </script> <script> var list = (list ?? []).concat([ { "stations": ["B", "C"], destination: 1.5, price_nomal_adult: 100 }, { "stations": ["B", "D"], destination: 1.5, price_nomal_adult: 170 }, { "stations": ["C", "D"], destination: 1.5, price_nomal_adult: 100 }, ]); </script> <script> $(function () { $(document).on('change', function () { var f = $('[name=from]').val(); var t = $('[name=to]').val(); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.departure ?? null; $('[name=departure]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.arrival ?? null; $('[name=arrival]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.destination ?? null; $('[name=destination]').val(p); var p = list.filter(x => x.stations.every(y => [f, t].includes(y)))[0]?.price_nomal_adult ?? null; $('[name=price_nomal_adult]').val(p); }); }); </script> <script> </script> 出発駅:<select name="from"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select><br> 到着駅:<select name="to"> <option value="">--</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select><br> <span id="span11"></span> <br />～ <br /><span id="span51"></span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('*[name="from"]').change(function() { // value値を取得 const str11 = $('*[name="from"]').val(); $("#span11").text(str11); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $('*[name="to"]').change(function() { // value値を取得 const str51 = $('*[name="to"]').val(); $("#span51").text(str51); }); </script> <br /> destination:<input name="destination"><br /> price_nomal_adult:<input name="price_nomal_adult">

  • 質問Aと質問Bを選択して、メッセージを出したい。

    質問Aと質問Bを選択して、メッセージを出すプログラムを作っています。 ところが、functionについて、引数の場合は2つ同時に使用できますけれども、関数はできないのがネックです。 なぜそれが必要かというと、 funcの中にifが入っており、そこで、メッセージの挙動の操作をしているためです。 もし、関数を2つ同時に使うとしたらどのようにしたらいいですか。 以下はそのjavascript文です。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { var val101 = document.forms.form101.Select101.value; var target = document.getElementById("output101"); if (val101 == "要素101") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output101"></div> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output111"></div> </body> </body> </html>

  • innerhtmlで出た値から、ifで返り値を出す

    innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>

  • ２段プルダウンの値の保持について（html）

    ２段プルダウンの値の保持について（html） お世話になっております。 WEBページにてエントリーフォームを作成しております。 base.html（エントリー画面） base_ck.php（確認画面） Aプルダウン（都道府県） Bプルダウン（所属名） MySQLよりPHPで先にBプルダウンの値を計算しておきます。 Aプルダウンを選択したのち、Aのvalue値をキーとしてBプルダウンの値を計算（javascript）しております。 ここまでは問題ないのですが、確認画面から戻る（submit）と、Bプルダウンの値が消えて選択もできなくなります。 今までは運用でごまかしておりましたが（Aプルダウンで一旦違う値を選択し再度選びなおすとBプルダウンが復活する）、 クライアントより修正依頼がきてしまいました。 PHP・HTMLは何とか書けるのですが、JavaScriptはど素人で、このプログラムもネットから情報を拾い集めて何とかできました。 ご教授いただければ幸いです。 サンプルコードは以下となります。 「base.html（エントリー画面）」 <html lang="ja"> <head> <title>テストページ</title> <script type="text/javascript"> <!-- データベースよりJavaScriptにて「所属名」を配列に格納する belong_value = new Array(); belong_text = new Array(); belong_length = new Array(); <?php 　　//ここでBプルダウンの値を計算して配列に格納する。 　 //データサンプル //belong_value[11] = new Array("0","1001","1002"); 　　//belong_length[11] = 3; //belong_text[11] = new Array("---","北海道","北海道倶楽部","札幌クラブ"); ?> function BelongList(idx){ //選択リストに項目を追加 for(i=0;i<belong_length[idx];i++){ document.form_kojin.belong.length=belong_length[idx]; document.form_kojin.belong.options[i].text = belong_text[idx][i]; document.form_kojin.belong.options[i].value= belong_value[idx][i]; } //選択リストがブランクの場合 if(i==0){ document.form_kojin.belong.length=1; document.form_kojin.belong.options[i].text = "---"; document.form_kojin.belong.options[i].value= 0; } } //--> </script> </head> <body> <div id="wrapper"> <div id="main"> <h1>申込ページ</h1><br /> <?php $action_ck = "https://aaa/base_ck.php"; ?> <h2></h2> <div class="main-frame"> <p><span class="style-indispensable">※必須項目</span></p><br /> <form name="form_kojin" action="<?php echo htmlspecialchars($action_ck, ENT_QUOTES); ?>" method="post"> <table> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>都道府県</div> </th> <td class="td-style"> <SELECT autofocus size="1" name="branch_name" id="branch_name" onChange="BelongList(this.options[selectedIndex].value);"> <OPTION value="0">---</OPTION> <OPTION value="11">北海道</OPTION> <OPTION value="21">青森県</OPTION> <OPTION value="22">岩手県</OPTION> </SELECT> </td> </tr> <tr> <th class="th-style"> <div><span class="style-indispensable">※</span>所属名</div> </th> <td class="td-style"> <SELECT size="1" name="belong" id="belong"><!-- BelongList関数より自動生成 --> <OPTION value="0">---</OPTION> </SELECT> </td> </tr> </table> <br /><br /> <div> <input name="submit" type="submit" value="　入力確認画面へ　" class="button-05"> </div> </form> </div> </div> </div> </body> </html>

  • phpでショッピングカート機能を作りたい。

    ＰＨＰで店舗のショッピングカートを作ろうとしています。 ｄａｔａ　１　リンゴ　100円 　　　　２　ミカン　　80円 　　　　３　バナナ　50円 ＰＨＰコード <form action="" method="post"> <?php $sql = "SELECT * FROM list"; $sth = $dbh->prepare($sql); $sth->execute(); while ($row = $sth->fetch()) { $id = $row["id"]; $name = $row["name"]; $price = $row["price"]; $image = $row["image"]; echo <<<EOT <table cellspacing="0" cellpadding="0" width="605" height="150"> <tr> <td rowspan="5" valign="top"><img src="../kanri/image/goods/$image" border="0" /></td> <form action="" method="post"> <input type="hidden" name="$id" value="$id" /> <input type="hidden" name="$name" value="$name" /> <input type="hidden" name="$price" value="$price" /> <td align="left" bgcolor="#eee8aa" width="400"><b>　$id.　$name</b></td> </tr> <tr> <td colspan="2" bgcolor="#ccccff"><p><font color="#000088"><b>税込 ：$price </b></p></td> </tr> <td colspan="2" bgcolor="#e6e6e6"><p>　個数 ： <select name="number"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>　<input type="submit" name="submit_cart" value="カートに入れる" /></p> </td> </tr> </table> </form> <br /> EOT; } ?> <hr></hr> <div align="center">カートの中身</div> <?php if (isset($_POST["submit_cart"])) { if(!isset($name)){ $name = $_POST['name']; } if(!isset($price)){ $price = $_POST['price']; } if(!isset($number)){ $number = $_POST['number']; } $total = $price * $number; echo "<div align='center'><p>$id 番の情報を取得しました。</p></div>"; echo "<div align='center'><p>商品名： $name </p></div><div align='center'><p>単価：$price 円　/　個数：$number 個</p></div>"; echo "<hr></hr>"; echo "<div align='center'><p>合計金額：<b>$total 円</b>です。</p></div>"; } ?> としているのですが、カートに入れるボタンを押しても最後のバナナしかカートに表示出来ません。 全ての商品の注文をカートに入れるにはどうすれば良いでしょうか？ ご教授のほど宜しくお願いします。

    • ベストアンサー
    • PHP
  • 選択したラベルを別の箇所に表示するには？

    お世話になります。 SELECTで選択したラベルを別の箇所に表示したいと考えており下記のように記述をしましたがどうも反応してくれません・・。 アドバイス頂けますと幸いです。 ■【HTML】 <SELECT name="search_price"> <option id="sp0" value="aaa" selected><label for="aaa">りんご</label></option> <option id="sp1" value="bbb" ><label for="bbb">みかん</label></option> <option id="sp2" value="ccc" ><label for="ccc">たぬき</label></option> </SELECT> <div id ="search_price">結果未表示</div> ■【Javascript】 $(window).load(function(){ var $b = $('select[name="search_price"]'); $b.bind('change', function(){ var add = ''; $b.each(function(index, value) {★ if ('select option:selected'){★ add += '<span>' + $('select option:selected').html() + '</span>');★ } }); if (add.length > 0) { add = add.substring(0, add.length - 2) + '.'; } else { add = '結果未表示'; } $('#search_price').html(add); }); }); 選択した項目のラベル（りんご等）が#search_priceの箇所に表示をさせてたいです。 行内の★の箇所がどうも怪しいようなのですが、アドバイスのほどよろしくお願い致します。

  • セレクト選択時にチェックボックスをオフにしたい

    フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>

  • jqueryで小計値の合算が出来ません・・・

    jqueryで計算した小計の値を合算したいのですが・・・ <div id="oa"> <select name="pa" id="value_pa"> <option value="0">選択して下さい</option> <option value="100">梅</option> <option value="200">竹</option> <option value="300">松</option> </select>× <select name="n" id="value_n"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>個=<span id="result_a"></span>円 </div> のように5種類の計算をして<span id="result_x"></span>の間に結果を埋め込んでいます。 この<span id="result_a"></span>から<span id="result_e"></span>の小計値をボタンを押すことにより合算して合計値を出したいのですが、うまくいきません。 jqueryでどのようにしたらいいのでしょうか？ 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • ループ、プログラムなのに！？

    　以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) { 　のループ、プログラムなのですか？ 　もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか？ 　よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>

  • jquery htmlのcookie保存・表示

    まず、やろうとしていることはボタンをクリックし、その中身と同じデータを持つものを xmlから読み込み表示します。 次にそこから他のページへ移動して、戻ってきたときに最後に表示していた内容を そのまま表示させたいのです。 crome、ieにて動作確認をさせたいです。 現状のソースです、 <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="JavaScript" type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="../jq/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("name")){ $("#newbox").html($.cookie("name")); } $('#buttons button').click(function(){ var val = $(this).text(); $.ajax({ url:"index.xml", type:"get", dataType:"xml", timeout:1000, cache:false, error:function(){ alert("error"); }, success:function(xml){ var listdata=""; $(xml).find("list").each(function(){ var name=$(this).find("name").text(); // var imgs=$(this).find("imgs").text(); // var price=$(this).find("price").text(); // $(this).children().each(function(){ if($(this).text()==val){ listdata+='<ul><li>'+name+'</li><li><img src="'+imgs+'" /></li><li>' +price+ '</li></ul>';}}) }); $("#newbox").html(listdata); $.cookie("name",$("#newbox").html()); } }); }) }); </script> </head> <body> <div id="buttons"> <button>600</button><button>700</button><button>800</button><button>900</button> </div> <div id="newbox"></div> </body> --xml-------- <list> <name>いちご</name> <imgs>001.jpg</imgs> <price>600</price> </list> <list> <name>ぶどう</name> <imgs>002.jpg</imgs> <price>700</price> </list> <list> <name>スイカ</name> <imgs>003.jpg</imgs> <price>800</price> </list> <list> <name>メロン</name> <imgs>004.jpg</imgs> <price>900</price> </list> <list> <name>りんご</name> <imgs>005.jpg</imgs> <price>600</price> </list> 　　　　・・・続く -------------- この状態だと、内容が少ない場合は表示されるのですが、内容が多くなると表示されなくなります。 基本的なことが間違っているのか、cookieの処理がおかしいのか 理由がわからず困っています。 どうかご教授お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する