外部のjavascriptファイルを読み込みセレクトボックスを正しく表示させたい。

Question

前提・実現したいこと

Laravel内で、外部のjavascriptファイルを読み込みセレクトボックスを正しく表示させたい。

発生している問題・エラーメッセージ

HTMLに直接書き込んだ際には、正しく読み込めているセレクトボックスが、外部のjavascriptファイルからでは、正しく読み込めない。

該当のソースコード

        <div>
          <select name="category_id">
          　@foreach ($categories as $key => $value)
          　　<option value="{{$key}}">{{$value}}</option>
        　　@endforeach
       　</select>
       </div>

function addForm()
    {
      const form = document.createElement("div");
      let content =`
       <div>
        <label>カテゴリー</label>
       </div>

       <div>
          <select name="category_id">
         　 @foreach ($categories as $key => $value)
          　　<option value="{{$key}}">{{$value}}</option>
        　　@endforeach
        　</select>
        </div>
      `;
     form.innerHTML = content;

     let parentDiv = document.getElementById("submit").parentNode;
     let addbtn = document.getElementById("submit");
     parentDiv.insertBefore(form, addbtn);
   }

試したこと

上記のphpファイルに書き込んだ方では、プルダウンに$categoriesの中身が反映されるのですが、外部のjavascriptファイルからではプルダウンの中身が、”{{$value}}”と表記されていて、反映されません。
ラベルタブ（<label>カテゴリー</label>）は、正しく読み込まれていますので、buttonによる呼び出しは、処理できています。

外部のjavascriptファイルはphp内のButtonより呼び出しています。

ご教授願います。

Answer 1

外部のjsファイルは拡張子jsですよね？
普通の設定ではphpが動くとはおもえませんけど？
あえてやるならPHP部分をAPI化して読み込んでください

Comments

[tkhr]

外部のjsファイルの呼び出しもとは拡張子.phpのファイルでした。
jsファイルのinnerHTML内にphpを書きこんで、phpファイルから読み込んでも、jsファイル内のphpは動作しませんか？
phpファイルに直接書き込めば動作するコードも、外部のjsファイルから呼び出して使う場合動作が変わるのでしょうか？
不勉強で申し訳ありませんが、よろしくお願いします。