ベストアンサー

埋め込み式では成功できたのに外部読み込み式ではなぜ

2023/12/19 14:21

次のプログラムを外部読み込み式にしましたが、うまくいきません。埋め込み式でしたらうまくいったのに…。 ↓javascript (function () { const form = document.semboku_f; //フォーム要素 form.onchange = function () { //インデックスを取得 const i21 = form.semboku_q1.selectedIndex; const i22 = form.semboku_q2.selectedIndex; //禁止条件 if (i21 == 0 || i22 == 0) { return false; } //テキストを取得 const text21 = form.semboku_q1.options[i21].text; const text22 = form.semboku_q2.options[i22].text; let str = text21 + " から " + text22 + " まで"; form.result11.value = str; if (i21 == i22) { str = "異なる記号を選んでください"; } else if ((semboku_f.semboku_q1.value == "中百舌鳥" && semboku_f.semboku_q2.value == "深井") || (semboku_f.semboku_q1.value == "深井" && semboku_f.semboku_q2.value == "中百舌鳥")) { str = "3.7km"; } else if ((semboku_f.semboku_q1.value == "中百舌鳥" && semboku_f.semboku_q2.value == "泉ケ丘") || (semboku_f.semboku_q1.value == "泉ケ丘" && semboku_f.semboku_q2.value == "中百舌鳥")) { str = "7.8㎞"; } form.result21.value = str; //結果を表示 }; })(); ↓html <script src="泉北 20220801 Mon\jsファイル 20220801 Mon\距離 20231219 Wed.js"></script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select>0 です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> </select></select>0 です。<p> <input id="result11" type="text11" value="" size="30"> <input id="result21" type="text21" value="" size="30"> <input type="reset" value="リセット"></p> <input type="button" name="b1" value="運賃検索" onclick="semboku_kotae()"> <p></input> <table border="1"> <input name=semboku_tokuten id="semboku_tokuten_2" size="6" type="hidden">km</input></th></tr> </table>00   <hr /> <hr /> <hr /> </body>

semboku_love
お礼率4% (43/955)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

retorofan
ベストアンサー率34% (435/1276)

2023/12/19 19:05 回答No.3

ページの読み込みが完了していないのに、スクリプトを実行しようとしたために、うまく動作しなかったのです。これは、コードの一部分を修正するだけで問題解決します。 [修正前] (function () { // 実行したいコード })(); [修正後] window.onload = function() { // 実行したいコード };

その他の回答 (2)

luka3
ベストアンサー率72% (424/583)

2023/12/19 16:49 回答No.2

それと、こんなやり方もありますよ、という例です。混乱させたらごめんなさい。多次元配列を用意して、インデックス(i21やi22)を使って目的のデータを取得します。出発駅に「中百舌鳥」を選ぶと ["","3.7km","7.8㎞"] の配列が選ばれます。次に到着駅で選んだものに応じて、strにデータがセットされます。 (function () { const form = document.semboku_f; //フォーム要素 form.onchange = function () { //インデックスを取得 const i21 = form.semboku_q1.selectedIndex; const i22 = form.semboku_q2.selectedIndex; //禁止条件 if (i21 == 0 || i22 == 0) { return false; } //テキストを取得 const text21 = form.semboku_q1.options[i21].text; const text22 = form.semboku_q2.options[i22].text; let str = text21 + " から " + text22 + " まで"; form.result11.value = str; //距離を取得 let distance = [ ["","3.7km","7.8㎞"], ["3.7km","","？？km"], ["7.8㎞","？？km",""] ]; if (i21 == i22) { str = "異なる記号を選んでください"; } else { str = distance[i21-1][i22-1]; } form.result21.value = str; //結果を表示 }; })();

luka3
ベストアンサー率72% (424/583)

2023/12/19 16:37 回答No.1

スクリプトの読み込みを一番最後にしてください。 HTMLでフォームが置かれる前にスクリプトを呼び出したので、onchangeイベントが割り当てられません。「document.semboku_f」が未定義という状態で、もちろんフォーム配下のパーツも無効の状態になります。 HTMLで配置されないうちは semboku_f が使えないということです。 jsのファイル名は変えましたが自分のローカル環境で動作してますので、あとはファイル名やパス名が間違ってないか確認してください。