问题描述
即使我将全部代码都保存在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 <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>
<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,请确保将其包含在页面底部。