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

実現したいこと

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

<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件

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

総合スコア21882

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つにまとめる必要があります。

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