Q&A
前提・実現したいこと
練習のためローカル環境のLaravel内でjavascriptを使って、
ボタンをクリックするとアラートを表示するような機能を実装中なのですが、
jsファイルを読み込んでくれず、ボタンをクリックしても動作しないので困っております。
該当のエラー内容
該当のボタンを押した後にChromeデベロッパーツールで確認するとdefindになります。
Uncaught ReferenceError: buttonClick is not defined at HTMLInputElement.onclick
該当のソースコード
html
1//ディレクトリ：views/index.php 2 3@extends('common.layout') 4@section('body') 5 <input type="button" value="button" onclick="buttonClick()"> 6@endsection 7
javascript
1//ディレクトリ：resources/js/app.js 2function buttonClick(){ 3 alert("処理を実行中です"); 4};
html
1//ディレクトリ：common/layout.blade.php 2 3<!doctype html> 4<html lang="ja"> 5 <head> 6 <!-- Required meta tags --> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <!-- Bootstrap CSS --> 11 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> 12 13 <!-- Scripts --> 14 <script src="{{ asset('js/app.js') }}" defer></script> 15 16 </head> 17 18<body> 19 20 @yield('body') 21 22</body>
javascript
1// webpack.mix.js 2const mix = require('laravel-mix'); 3 4/* 5 |-------------------------------------------------------------------------- 6 | Mix Asset Management 7 |-------------------------------------------------------------------------- 8 | 9 | Mix provides a clean, fluent API for defining some Webpack build steps 10 | for your Laravel application. By default, we are compiling the Sass 11 | file for the application as well as bundling up all the JS files. 12 | 13 */ 14 15mix.js('resources/js/app.js', 'public/js') 16 .sass('resources/sass/app.scss', 'public/css');
試したこと
＝＝＝反応したケース＝＝＝
1)views/index.phpファイルに直接<script>タグで該当のjsコードを記載
→ボタンをクリックすると反応した
＝＝＝反応しなかったケース＝＝＝
１）Chromeデベロッパーツールのsourceタブでapp.jsが読み込まれているか確認
→public/js/app.jsが読み込まれていたが、resources/js/app.jsの方は確認できなかった。
２)public/js/app.jsに「resources/js/app.js」と同じ記載をして動作するか確認
→最後の行にコードを追記してボタンが反応するか試したが反応せず、デベロッパーツールのapp.jsの記載内容をみると足したコードの部分だけなぜか表示がなかった。（１行目に記載してみても同じく表示はなかった）
3）laravel-mixが反応していないのかなと思い、「npm run dev」を再度走らせた後に再度ボタンが反応するか検証した
→resources/js/app.jsだけに該当のjsコードを記載して検証したが、ダメ
→public/js/app.jsだけに該当のjsコードを記載して検証したが、ダメ
4)layout.blade.phpのscript部分を消す
→ネットの記事で下記の部分を消すと反応したようなことが書いていたので試したが、ダメ
補足情報（FW/ツールのバージョンなど）
-Laravel 6.20.16
-PHP 7.4.15
-Docker
回答1件
0
ベストアンサー
何気なく書いてるfunction buttonClick()はグローバル関数。
laravel-mix(webpack)でビルドするとグローバルではなくなるので使えない。
webpackを使う＆グローバルで使いたいなら。
js
1function buttonClick(){ 2 alert("処理を実行中です"); 3}; 4 5window.buttonClick = buttonClick;
もしくは、この場合webpack使う必要がないので
resources/js/script.jsにbuttonClick()を書いて
webpack.mix.jsではコピーするだけ。
js
1mix.js('resources/js/app.js', 'public/js') 2 .copy('resources/js/script.js', 'public/js');
{{ mix('js/script.js') }}
ビルドしてないので直接public/js/script.jsに置いても結果は同じだけど
Laravelなら「ソースはresourcesに置いてlaravel-mixを通してpublicに出力」って使い方に統一しておいたほうがいい。
publicに直接置いたりBladeに直接JSを書いてるLaravelプロジェクトは一目見ただけでやばいと認識される。
投稿2021/03/10 14:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/11 02:23