JavaScriptでHTML上のフォームのテキストのvalueの値を取得し、URLの内容を書き換え

JavaScriptでHTML上のフォームのテキストのvalueの値を取得し、URLの内容を書き換えたいのですが、写真のようにして実行しましたがエラーが出てしまい、解決策が分かりません。HTML は<input Id = “input” type = “text” value = “Osaka”>となっています。どなたかご教示ください。

質問者からの補足コメント

• JavaScript プログラム

  
    補足日時：2021/07/14 13:21

• それでも出てしまいます。エラーの内容が
  TypeError: Cannot read property ‘value’ of null
  というものでvalueの値を取得できていないようなのですが、どう変えれば良いのかわからない状態です。

    補足日時：2021/07/14 14:09

• JavaScriptプログラム1

  
    補足日時：2021/07/14 15:33

• JavaScriptプログラム2

  
    補足日時：2021/07/14 15:34

• HTMLプログラム

  
    補足日時：2021/07/14 15:34

• 写真のようなプログラムに書き直したのですが、JavaScriptプログラムの31行目のURL という変数がローカル変数であるためなのか、ReferenceError: url is not definedとエラーが出てしまいます。申し訳ないのですが、こちらの解決策はどのようにすれば良いかご教示くださいませんでしょうか。

    補足日時：2021/07/14 15:39

No.5 ベストアンサー 回答者： sukitaro 回答日時： 2021/07/14 17:21

No4です。

2021/07/14 15:39の補足読みました。

>ReferenceError: url is not definedとエラーが出てしまいます。

全部を、onloadで実行する関数で囲んでしまうのはいかがでしょうか。

window.onload = function(){

//ここに全部書く

}


また、変数urlを定義してから、
それを引数に持つ関数を実行しないと、
エラーが出ると思いますので、順番に注意してください。


また、JavaScriptの話ではありませんが、
もしwindows10を利用されているのであれば、
画面キャプチャは、
winキー + shiftキー + sキー
を同時押しでできますので、便利です。


また、No3さんのご指摘の通り、
エスケープ処理は大事だと思いました。

この回答へのお礼

遅くなって申し訳ありません。
ありがとうございました。

お礼日時：2021/07/15 22:56

No.6 回答者： fujillin 回答日時： 2021/07/15 11:01

No2です

＞プログラムに書き直したのですが、～～
＞URL という変数がローカル変数であるためなのか、～～
変数の問題もあるでしょうけれど、それ以前に処理の順序が支離滅裂のように思われます。
（画像なので、インデントが正しいのかなど確認していませんけれど…）

元になさっているサイト（または本など）の解説を熟読の上、そこに掲載されている通りのものを、まずは、作成してみるのが宜しいように思います。
それで動作するのを確認したうえで、inputの入力に対応したければ、既回答にあるようになさればよいでしょう。

No.4 回答者： sukitaro 回答日時： 2021/07/14 14:46

No1です。

補足読みました。

https://teratail.com/questions/257772

このサイトによると、読み込みの順番に問題があるのかもしれません。

つまり、

<input id="input" type="text" value="Osaka">
<script>
let input = document.getElementById("input").value;
console.log(input);
</script>

であれば、適切に動くのですが、
スクリプトの順番を逆にして、

<script>
let input = document.getElementById("input").value;
console.log(input);
</script>
<input id="input" type="text" value="Osaka">

だと、今回のエラーが出ます。

このため、スクリプトを</body>タグの直前に入れるか、
DOMContentLoadedを使うと良いようです。

No.3 回答者： Ogre7077 回答日時： 2021/07/14 14:45

実行タイミングで <input> は存在していますか?

→ 存在しないならば、イベント load のタイミングに変更
→ それでも存在しないなら <input> 生成イベントを調査

同じ id を持つ要素が別にありませんか?
→ 存在するなら id の見直しを

余談ではありますが、
URL に文字列組み込みの際は、適切なエスケープ処理を加えましょう
https://developer.mozilla.org/ja/docs/Web/JavaSc …

No.2 回答者： fujillin 回答日時： 2021/07/14 14:45

こんにちは

すでに指摘がでていますけれど、HTML内の全角記号は半角記号にしてください。
（ご提示の記述では、ダブルクォーテーションが解釈されません）
わからなければ、No1様がご提示のタグをコピペするのが確実です。

それでも、同じエラーが出るのなら、スクリプトの位置が悪いものと推測されます。
（全文が不明なので、よくわかりませんけれど…）
・ input タグよりも後に、ご提示のスクリプトを置くようにしてください。
・スクリプトは<script>の開始、終了タグで挟んでおく必要があります。

No.1 回答者： sukitaro 回答日時： 2021/07/14 13:46

htmlが、全角混じりだからでしょうか。

<input id = "input" type = "text" value = "Osaka">

でも、エラーが出ますか。