我正在使用布局模板来生成脚本和内容，如下所示：
<!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 之前加载脚本并给出“未定义”错误，因为即使我使用“defer”属性，我的输入尚未加载..
所以我只是想让我的脚本在页面加载后工作，使用这些部分将其放置在我的 html 的头部。但即使使用 defer 属性，它也会在渲染我的 html 之前继续加载。
如果您查看 MDM 网络文档，您会注意到警告
警告：如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下它将不起作用。
<script>
document.addEventListener('DOMContentLoaded', function() {
let dateInput = document.getElementById('reservationDate');
alert(dateInput.value);
});
</script>