在laravel中延迟我的app.js不能让我的JavaScript代码正常工作

如何解决在laravel中延迟我的app.js不能让我的JavaScript代码正常工作

即使我将全部代码都保存在javascript中，直到从我的app.js中删除延迟后，它仍无法正常工作。有原因吗？

修改 我在此处添加了整个blade.PHP文件，底部的javascript是从我的add.blade.PHP文件扩展而来的。 javascript代码也来自我的add.blade.PHP文件。

这是我的刀片文件

@extends('layouts.app')
@section('style')
    <link href="{{ asset('css/Admin/sql-data-viewer.css') }}" rel="stylesheet">   
@endsection
@section('content')
<?PHP ?>
    <section class="data-viewer">
      <div class="d-flex justify-content-between px-3">
        <h3>Select Banner to change</h3>
      <a href="{{URL::Current()}}/create"><button type="button" class="btn add-data text-white rounded-pill">Add Banner &nbsp;<i class="fas fa-plus"></i></button></a>
      </div>
    <form method="post">
        @csrf
        @method('DELETE')
      @if(session()->has('message'))
      <div class="alert alert-success">
          {{ session()->get('message') }}
      </div>
      @endif 
      <div class="delete pl-3 mt-3 mb-3">
        <label for="deleteSelected">Action:</label>
        <select name="deleteSelected" id="deleteSelected" class="@error('deleteSelected') is-invalid @enderror" name="deleteSelected" >
          <option disabled selected>---------</option>
          <option>Delete Selected Banner</option>
        </select>
      <button formaction="{{ route('banners.delete') }}" type="submit" class="go" id="deleleGo" onclick="deleteBtn()">Go</button> 
      &nbsp;&nbsp;<span id="selected">0</span> of {{$showCounts}} selected
      @error('deleteSelected')
      <span class="invalid-Feedback" role="alert">
          <strong>{{ $message }}</strong>
      </span>
      @enderror
      </div>
      <table class="table table-hover table-striped table-dark">
      <div id="selectError"><p>You must check at least one checkBox</p></div>
        <thead>
          <tr>
            <th scope="col"><input type="checkBox" id="checkHead" class="selectall"></th>
            <th scope="col">Id</th>
            <th scope="col">Image</th>
            <th scope="col">Caption heading</th>
            <th scope="col">Caption Description</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($banners as $banner)
          <tr>
            <th scope="row"><input type="checkBox" name="ids[]" class="selectBox" value="{{ $banner->id }}" onchange="change()"></th>
            <td onClick="location.href='{{URL::current()}}/{{Str::slug($banner->id) }}/edit'" style="cursor: pointer">{{$banner->id}}</td>
            <td onClick="location.href='{{URL::current()}}/{{Str::slug($banner->id) }}/edit'" style="cursor: pointer"><img src="/storage/{{$banner->Banner_Image}}" alt="{{$banner->Caption_heading}}" class="img-thumbnail" width="70px" height="100px"></td>
            <td onClick="location.href='{{URL::current()}}/{{Str::slug($banner->id) }}/edit'" style="cursor: pointer">{{$banner->Caption_heading}}</td>
            <td onClick="location.href='{{URL::current()}}/{{Str::slug($banner->id) }}/edit'" style="cursor: pointer">{{$banner->Caption_Description}}</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </form>
  </section>
@endsection

@section('script')
<script>
const all = document.getElementById("checkHead");
all.addEventListener('click',toogle);
function toogle() {
  const isChecked = all.checked;
  Array.from(document.getElementsByTagName('input')).forEach(element =>{
    element.checked = isChecked;
  });
}
function change(){
  var total = document.getElementsByClassName('selectBox').length;
  var number = document.querySelectorAll('.selectBox:checked').length;
  if(total === number){
    document.getElementById("checkHead").checked = true;
  } else{
    document.getElementById("checkHead").checked = false;
  }
  document.getElementById("selected").innerHTML = number;
}
function deleteBtn(){
  checked = document.querySelectorAll("input[type=checkBox]:checked").length;

  if(!checked) {
    var a = document.getElementById("selectError").style.display = "block";
    return false;
  }
};
</script>
@endsection

解决方法

这可能是由于您试图获取该脚本运行时不存在的元素而发生的。如果您不希望推迟使用javascript，请确保将其包含在页面底部。