在 Laravel 中將 JavaScript 作為外部腳本運行

Question

我有這樣的刀片代碼：

<input type='text' id="input1">
<div >
 <h3 id="showData"> Data will be shown here  </h3>

</div>

<script>
  var input=document.getElementById('input1').value;

  document.getElementById('showData').innerHTML=input;
</script>

我想要的是將腳本部分寫入一個單獨的文件（比如稱為 externalScript.js）並在刀片文件中調用它。

另外，我對此有疑問。 如果我這樣做，由於腳本是從外部文件運行的，它將如何獲取像input1或showData這樣的id值？

Answer 1

編寫一個名為： externalScript1.js的新文件

添加腳本標簽，最好在代碼的頭部或腳部。

    <script src="{{ asset('externalScript1.js') }}" defer></script>

（資產助手獲取公共文件夾的路徑https://laravel.com/docs/8.x/helpers#method-asset ）

最后一切都將從一頁加載，因此找到了元素，所以你不會有問題。

Answer 2

只需在 laravel 資源目錄中添加 js 文件，鏈接到 webpack 並編譯更多信息。

在執行腳本時，將其附加在頁面末尾（在</body>之前）或等待頁面加載document.addEventListener('DOMContentLoaded', function() {})

在主包裝器中附加 js 文件，而不是在嵌套的刀片元素中