Q&A
実現したいこと
以下のプログラムを違う路線の駅同士を選択しても正常に作動するようにしたいです。
<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の実装方法がわかりません。
何しろいろいろ複雑にイベントが絡まり合っているのですから。
補足
特になし
回答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
総合スコア21301
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/01/22 07:39
2024/01/23 08:06
2024/01/23 10:48 編集
2024/01/24 03:10