Go to Qiita Advent Calendar 2024 Top
LoginSignup
sembokulove
@sembokulove (Missing place)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

南海電車の駅、泉北高速の駅どちらを選んでも距離と運賃を表示させたいです。

Q&A

JavaScriptHTML5

解決したいこと

南海電車と泉北高速の運賃計算プログラムを一つのプルダウンにまとめている状態です。
この状態で、南海：難波と天下茶屋と選択すれば、駅と駅との間の距離と運賃を、
泉北：泉ケ丘と栂・美木多と選択すれば、駅と駅との間の距離と運賃を表示できることが目標です。
以前、別のhtml支援サイトへの誘導がありました。あれは明らかに悪質な誘導です。やめてください‼

発生している問題・エラー

はじめは、別々のjavascriptファイルに入れており、その際は、なぜか、片方の路線が動いて、片方が動かないといった状態になりました。
そのため、もともとのhtmlに入れさせると、どちらも動かなくなりました。

<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>
<option>栂・美木多</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>
<option>栂・美木多</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>
<!--<script type="text/javascript" src="南海 20220803 Wed\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script>
<script type="text/javascript" src="E:\鉄道運賃検索 11 2022-6-23 Thu\新規 20231217 Sun\南海 20220803 Wed\jsファイル 20220801 Mon\距離 運賃 20231221 Thu.js"></script>
<script type="text/javascript" src="泉北 20220801 Mon\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script>
<script type="text/javascript" src="泉北 20220801 Mon\jsファイル 20220801 Mon\距離 20231219 Wed.js"></script>-->
</body>
</html>
<!--HTMLここまで-->
<!--問題-->
<hr />
<hr />
<hr />

<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <title>フォームに入力された数値の取得</title>
</head>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const form = document.forms.fare_f;
    form.onchange = function () {

        // インデックスを取得
        const i21 = form.fare_q1.selectedIndex;
        const i22 = form.fare_q2.selectedIndex;

        // 禁止条件
        if (i21 == 0 || i22 == 0) {
            return false;
        }

        // テキストを取得
        const text21 = form.fare_q1.options[i21].text;
        const text22 = form.fare_q2.options[i22].text;

        let str = text21 + " から " + text22 + " まで";
        form.result11.value = str;
        if (i21 == i22) {
            str = "異なる駅名を選んでください";
        } else if ((fare_f.fare_q1.value == "難波" && fare_f.fare_q2.value == "新今宮")
            || (fare_f.fare_q1.value == "新今宮" && fare_f.fare_q2.value == "難波")) {
            str = "1.4km";
        } else if ((fare_f.fare_q1.value == "難波" && fare_f.fare_q2.value == "天下茶屋")
            || (fare_f.fare_q1.value == "天下茶屋" && fare_f.fare_q2.value == "難波")) {
            str = "3.0km";
        }
        form.result21.value = str;  //結果を表示
    };
});
function fare_kotae0
{
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 + 201110002}
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.style.backgroundColor="aqua ";fare_ten = fare_ten + 201110003}
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.style.backgroundColor="aqua ";fare_ten = fare_ten + 201110008}
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.style.backgroundColor="aqua ";fare_ten = fare_ten + 201110002}
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.style.backgroundColor="aqua ";fare_ten = fare_ten + 201110009}
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.style.backgroundColor="aqua ";fare_ten = fare_ten + 201110008}
else fare_f.fare_q1.style.backgroundColor="red"
fare_f.fare_tokuten.value=fare_ten

var myFunc = function(fare_kotoae) {
	const str = document.getElementById("color3").value;

	document.getElementById("span3").textContent = str;
}
//ここから

  if (fare_f.fare_tokuten.value==201110002) 
  {
    fare_f.fare_futsu_otona.value = Number("180");
    fare_f.fare_futsu_shoni.value = Number("90");
  }
  else if (fare_f.fare_tokuten.value==201110003)
  {
    fare_f.fare_futsu_otona.value = Number("180");
    fare_f.fare_futsu_shoni.value = Number("90");
  }
}
document.addEventListener("DOMContentLoaded", function () {
    const form = document.forms.fare_f;
    form.onchange = function () {

        // インデックスを取得
        const i21 = form.fare_q1.selectedIndex;
        const i22 = form.fare_q2.selectedIndex;

        // 禁止条件
        if (i21 == 0 || i22 == 0) {
            return false;
        }

        // テキストを取得
        const text21 = form.fare_q1.options[i21].text;
        const text22 = form.fare_q2.options[i22].text;

        let str = text21 + " から " + text22 + " まで";
        form.result11.value = str;
        if (i21 == i22) {
            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.3㎞";
        } else if ((fare_f.fare_q1.value == "栂・美木多" && fare_f.fare_q2.value == "光明池")
            || (fare_f.fare_q1.value == "光明池" && fare_f.fare_q2.value == "栂・美木多")) {
            str = "1.9km";
        }
        form.result21.value = str;  //結果を表示
    };
});
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.style.backgroundColor = "aqua";
    fare_ten = fare_ten + 201120002;
  }
else fare_f.fare_q1.style.backgroundColor="red"
fare_f.fare_tokuten.value=fare_ten

var myFunc = function(fare_kotoae) {
	const str = document.getElementById("color3").value;

	document.getElementById("span3").textContent = str;
}
//ここから

  if (fare_f.fare_tokuten.value==201120001) 
  {
    fare_f.fare_futsu_otona.value = Number("180");
    fare_f.fare_futsu_shoni.value = Number("90");
  }
  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");
  }
}
</script>

例）

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

![運賃検索 エラー 20231221 Thu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339900/aae25c41-a9e4-d1d5-b21f-3d7d9cd0c4fc.png)

例）

def greet
  puts Hello World
end

自分で試したこと

上記の通り、外部ファイルでは確認が困難なため、
内部に埋め込んだ際、問題が発覚しました。

0

1Answer

YottyPG
@YottyPG

エラーの原因とエラーが出ている行数は、添付されている画像に出力されている通りです。まずは、該当行におかしなところがないか確認してみてください。

image.png

また、上記以外にも括弧が抜けていたり、中括弧の対応がとれいていなかったりする箇所があります。

利用している開発ツールによっては、}中括弧にフォーカスするとどの中括弧と対応がとれているか強調してくれたり、中括弧の対応可視化してくれたりするかと思います。
そういったものも活用しながら、まずはソースコードをエラーのない状態まできれいにしてみてください。

3Like

Your answer might help someone💌

LoginSign Up