今回は、Laravel10 で JavaScript のメソッドが読み込まれなかった時の解決事例をご紹介します！
開発環境
- Laravel10
- aws cloud9
前提
課題
-
Laravelのプロジェクトでviteを利用しJavaScriptで記述をしたところ、基本的には問題なく作動しましたが、1つのメソッドだけが実行されませんでした。🤷♂️ - 実行されなかったメソッドは、私が定義した
loadImage()メソッドです。 - メソッドの実行は、
htmlの<input>タグのonchange属性で行っています。
<!-- 修正前のhtmlの記述 -->
<div class="post_image">
<input type="file" name="image" accept="image/*" onchange="loadImage(this);"/> <!-- onchange属性-->
<div id="preview"></div>
</div>
// 修正前のjavascriptの記述
function loadImage(obj)// loadImage()メソッド
{
const preview = document.querySelector("#preview");
preview.insertAdjacentHTML("beforebegin", "<p>プレビュー</p>");
for (let i = 0; i < obj.files.length; i++) {
const fileReader = new FileReader();
fileReader.onload = (event) => {
document.querySelector("#preview").insertAdjacentHTML("afterbegin", '<img src="' + event.target.result + '"/>');
};
fileReader.readAsDataURL(obj.files[i]);
}
}
解決事例
-
onchange属性を使わない方法を取りました。😊 -
htmlの<input>タグにid="imageInput"をもたせ、JavaScriptファイルでchangeイベントハンドラーを使用しました。 - 具体的な記述は以下の通りです。
<!-- 修正後のhtmlの記述 -->
<div class="post_image">
<input type="file" name="image" accept="image/*" id="imageInput"/><!-- onchange属性->id属性-->
<div id="preview"></div>
</div>
// 修正後のjavascriptの記述
function loadImage(obj)// 変更なし
{
const preview = document.querySelector("#preview");
preview.insertAdjacentHTML("beforebegin", "<p>プレビュー</p>");
for (let i = 0; i < obj.files.length; i++) {
const fileReader = new FileReader();
fileReader.onload = (event) => {
document.querySelector("#preview").insertAdjacentHTML("afterbegin", '<img src="' + event.target.result + '"/>');
};
fileReader.readAsDataURL(obj.files[i]);
}
}
const imageInput = document.querySelector("#imageInput");// 追加
imageInput.addEventListener("change", function() {
loadImage(this);
});
説明
-
onchange属性が使えない理由を調べましたが、分かりませんでした。😢 - 公式ドキュメントにで
onchangeで検索したところonchangeはヒットしなかったため、onchange属性が古い記述方法なのかもしれません。
結論
- ひとまず、
onchange属性は使いません！
追記（2024/3/28）
コメントで 「type="module"」 というキーワードをいただいたので、再度、修正してみました！
<head>
<!-- 追記-->
<script type="module">{!! Vite::content('resources/js/preview.js') !!}</script>
</head>
残念ながら解決できませんでした。
以下、コンソールのエラーです。
create:158 Uncaught ReferenceError: loadImage is not defined
at HTMLInputElement.onchange (create:158:99)
何か手違いがございましたらご指摘いただけると幸いです。🙇♂️