質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1081閲覧

運賃計算プログラムを実装したいです。具体的には、jqueryを用いた方法だとありがたいです。

sembokulove

総合スコア76

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2024/01/22 01:01

実現したいこと

以下のプログラムを違う路線の駅同士を選択しても正常に作動するようにしたいです。

<html> <body> <style> textarea.hoge { width: 150px; height:200px;} </style> <!--HTMLここまで--> <!--問題--> <br> <hr> <br> <!--阪和線--> <body> <form name="fare_f"> 出発駅は <select name="fare_q1"> <option>選択肢</option> <option id="hoge">難波</option> <option>新今宮</option> <option>天下茶屋</option> <option>堺東</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。 <p> 到着駅は <select name="fare_q2"> <option>選択肢</option> <option id="hoge">難波</option> <option>新今宮</option> <option>天下茶屋</option> <option>堺東</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select> です。<p> <input id="result11" type="text11" value="" size="30"> <br> <input id="result21" type="text21" value="" size="30"> <input type="reset" value="リセット"></p> <input type="button" name="b1" value="運賃検索" onclick="fare_kotae()"> <p></input> <table border="1"> <input name=fare_tokuten id="fare_tokuten_2" size="6" type="hidden"></input></th></tr> <tr><th>普通大人</th><th><input name=fare_futsu_otona id="fare_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=fare_futsu_shoni id="fare_futsu_shoni_2">円</input></th></tr> </table> </body> </html> <!--HTMLここまで--> <!--問題--> <hr /> <hr /> <hr /> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームに入力された数値の取得</title> </head>

以上html文。

<script> document.addEventListener("DOMContentLoaded", function () { const form = document.forms.fare_f; form.onchange = function () { // インデックスを取得 const i11 = form.fare_q1.selectedIndex; const i12 = form.fare_q2.selectedIndex; // 禁止条件 if (i11 == 0 || i12 == 0) { return false; } // テキストを取得 const text21 = form.fare_q1.options[i11].text; const text22 = form.fare_q2.options[i12].text; let str = text21 + " から " + text22 + " まで"; form.result11.value = str; if (i11 == i12) { str = "異なる駅名を選んでください"; } else if ((fare_f.fare_q1.value == "難波" && fare_f.fare_q2.value == "新今宮") || (fare_f.fare_q1.value == "新今宮" && fare_f.fare_q2.value == "難波")) { str = "2.3km"; } form.result21.value = str; //結果を表示 }; }); </script> <script> function fare_kotae() { fare_ten_11 = 0; if ((fare_f.fare_q1.value=="難波" && fare_f.fare_q2.value=="新今宮") || (fare_f.fare_q1.value=="新今宮" && fare_f.fare_q2.value=="難波")) { fare_f.fare_q1.style.backgroundColor = "aqua"; fare_ten_11 = fare_ten_11 + 201110001; } else fare_f.fare_q1.style.backgroundColor="red" fare_f.fare_tokuten.value=fare_ten_11 var myFunc = function(fare_kotoae_1) { const str = document.getElementById("color3").value; document.getElementById("span1").textContent = str; } //ここから if (fare_f.fare_tokuten.value==201110001) { fare_f.fare_futsu_otona.value = Number("1800"); fare_f.fare_futsu_shoni.value = Number("900"); fare_f.fare_tsukin_teiki_otona_1.value = Number("7770"); fare_f.fare_tsukin_teiki_shoni_1.value = Number("3890"); } } </script> <script> document.addEventListener("DOMContentLoaded", function () { const form11 = document.forms.fare_f; form11.onchange = function () { // インデックスを取得 const i21 = form11.fare_q1.selectedIndex; const i22 = form11.fare_q2.selectedIndex; // 禁止条件 if (i21 == 0 || i22 == 0) { return false; } // テキストを取得 const text21 = form11.fare_q1.options[i21].text; const text22 = form11.fare_q2.options[i22].text; let str11 = text21 + " から " + text22 + " まで"; form11.result11.value = str11; if (i21 == i22) { str11 = "異なる駅名を選んでください"; } else if ((fare_f.fare_q1.value == "中百舌鳥" && fare_f.fare_q2.value == "深井") || (fare_f.fare_q1.value == "深井" && fare_f.fare_q2.value == "中百舌鳥")) { str11 = "3.7km"; } else if ((fare_f.fare_q1.value == "中百舌鳥" && fare_f.fare_q2.value == "泉ケ丘") || (fare_f.fare_q1.value == "泉ケ丘" && fare_f.fare_q2.value == "中百舌鳥")) { str11 = "7.8㎞"; } form11.result21.value = str11; //結果を表示 }; }); </script> <script> function fare_kotae() { fare_ten = 0; if ((fare_f.fare_q1.value=="栂・美木多" && fare_f.fare_q2.value=="光明池") || (fare_f.fare_q1.value=="光明池" && fare_f.fare_q2.value=="栂・美木多")) { fare_f.fare_q1.style.backgroundColor = "aqua"; fare_ten = fare_ten + 201120001; } else if (((fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="栂・美木多") || (fare_f.fare_q1.value=="栂・美木多" && fare_f.fare_q2.value=="泉ケ丘")) || ((fare_f.fare_q1.value=="中百舌鳥" && fare_f.fare_q2.value=="深井") || (fare_f.fare_q1.value=="深井" && fare_f.fare_q2.value=="中百舌鳥")) || ((fare_f.fare_q1.value=="光明池" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="光明池"))) { fare_f.fare_q1.style.backgroundColor = "aqua"; fare_ten = fare_ten + 201120002; } else if (((fare_f.fare_q1.value=="深井" && fare_f.fare_q2.value=="泉ケ丘") || (fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="深井")) || ((fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="光明池") || (fare_f.fare_q1.value=="光明池" && fare_f.fare_q2.value=="泉ケ丘")) || ((fare_f.fare_q1.value=="栂・美木多" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="栂・美木多"))) { fare_f.fare_q1.style.backgroundColor = "aqua"; fare_ten = fare_ten + 201120003; } else if (((fare_f.fare_q1.value=="深井" && fare_f.fare_q2.value=="栂・美木多") || (fare_f.fare_q1.value=="栂・美木多" && fare_f.fare_q2.value=="深井")) || ((fare_f.fare_q1.value=="中百舌鳥" && fare_f.fare_q2.value=="泉ケ丘") || (fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="中百舌鳥")) || ((fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="泉ケ丘"))) { fare_f.fare_q1.style.backgroundColor = "aqua"; fare_ten = fare_ten + 201120004; } //ここから if (fare_f.fare_tokuten.value==201120001) { fare_f.fare_futsu_otona.value = Number("180"); fare_f.fare_futsu_shoni.value = Number("90"); fare_f.fare_tsukin_teiki_otona_1.value = Number("6950"); fare_f.fare_tsukin_teiki_shoni_1.value = Number("3480"); } else if ((fare_f.fare_tokuten.value==201120002)&&(!((fare_f.fare_q1.value=="光明池" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="光明池")))) { fare_f.fare_futsu_otona.value = Number("200"); fare_f.fare_futsu_shoni.value = Number("100"); fare_f.fare_tsukin_teiki_otona_1.value = Number("7770"); fare_f.fare_tsukin_teiki_shoni_1.value = Number("3890"); } else if ((fare_f.fare_tokuten.value==201120003)&&(!((fare_f.fare_q1.value=="栂・美木多" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="栂・美木多")))) { fare_f.fare_futsu_otona.value = Number("220"); fare_f.fare_futsu_shoni.value = Number("110"); fare_f.fare_tsukin_teiki_otona_1.value = Number("8590"); fare_f.fare_tsukin_teiki_shoni_1.value = Number("4300"); } else if ((fare_f.fare_tokuten.value==201120004)&&(!((fare_f.fare_q1.value=="泉ケ丘" && fare_f.fare_q2.value=="和泉中央") || (fare_f.fare_q1.value=="和泉中央" && fare_f.fare_q2.value=="泉ケ丘")))) { fare_f.fare_futsu_otona.value = Number("240"); fare_f.fare_futsu_shoni.value = Number("120"); fare_f.fare_tsukin_teiki_otona_1.value = Number("9400"); fare_f.fare_tsukin_teiki_shoni_1.value = Number("4700"); } } </script>

発生している問題・分からないこと

document.addEventListener("DOMContentLoaded", function () {
const form = document.forms.fare_f;
form.onchange = function () {を複数重ねると、後のほうの挙動が優先されてしまいます。

該当のソースコード

javascript

1document.addEventListener("DOMContentLoaded", function () { 2 const form = document.forms.fare_f; 3 form.onchange = function () {

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

いろいろ検索したところ、jqueryを実装したほうが、プログラムも簡便で済むということでした。
しかし、この場合のjqueryの実装方法がわかりません。
何しろいろいろ複雑にイベントが絡まり合っているのですから。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

onchange プロパティへの代入だとコールバック関数は1つしか登録できないので、DOMContentLoaded イベントと同様に addEventListener() を使えばとりあえず動くのではないでしょうか。

js

1document.addEventListener("DOMContentLoaded", function () { 2 document.forms.fare_f.addEventListener("change", function () {

↑のアプローチではダメでした。

onchange に代入している2つの関数を1つにまとめる必要があります。片方の else if (...) { ... } の部分をもう片方に繋げていく感じですかね。


jqueryを実装したほうが、プログラムも簡便で済むということでした。

jQuery を採用してもコードが少し短くなるだけで、プログラムの本質的な設計が楽になるわけではありません。いまの時代にはほぼ不要なものですし、覚えなければいけないことが増えるのでおすすめしません。

投稿2024/01/22 02:26

編集2024/01/24 03:12
int32_t

総合スコア20872

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2024/01/22 07:39

ブラウザの開発者ツールのコンソールに Syntax Error が出ているかと思います。適切な位置に ) を挿入してください。
yambejp

2024/01/23 08:06

ずばりバグなく完璧に動作する回答以外はいらないみたいですから掘り下げる必要はなさそうですよ
sembokulove

2024/01/23 10:48 編集

できません。上書きされます。 正確に言うと、距離が出ないです。ヽ(`Д´)ノプンプン
int32_t

2024/01/24 03:10

コードをよくみると、2つの onchange ハンドラともに result21.value に書き込んでいるので、単純に2つのハンドラとも実行されるようにしても上書きになってしまいますね。(質問者さんがその状態まで動かせているかどうかは不明ですが) この回答のアプローチでは問題は解決しませんね。2つのonchange ハンドラを1つにまとめる必要があります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問