我使用布局模板来生成脚本和内容,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'The Gourmet')</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
@yield('scripts')
</head>
<body>
@include('layout.employee.header')
@yield('content')
@include('layout.footer')
</body>
</html>
在我的blade.php中,我有以下内容:
@extends('components.layout')
@section('title')
{{ env('APP_NAME') . ' - Reserve' }}
@endsection
@section('scripts')
<script defer>
let dateInput = document.getElementById('reservationDate');
alert(dateInput.value);
</script>
@endsection
@section('content')
<input type="date" name="reservationDate" id="reservationDate" min="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}">
@endsection
输入有一个值,如果我把它放在输入下面,我的脚本就可以工作.但是当我通过节添加脚本时,它会在html之前加载脚本,并给出一个"undefined"错误,因为即使我使用了"defer"属性,我的输入也还没有加载.
所以我只是试着让我的脚本在页面加载后工作,使用部分将它放在我的html的头部.但在呈现我的html之前,它会继续加载,即使使用了defer属性.