我使用布局模板来生成脚本和内容,如下所示:

<!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属性.

推荐答案

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let dateInput = document.getElementById('reservationDate');
        alert(dateInput.value);
    });
</script>

Javascript相关问答推荐

如何访问react路由v6加载器函数中的查询参数/搜索参数

容器如何更改默认插槽中子项的显示?

Cypress -使用commands.js将数据测试id串在一起失败,但在将它们串在一起时不使用命令有效

Cookie中未保存会话数据

D3 Scale在v6中工作,但在v7中不工作

如何从一个列表中创建一个2列的表?

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

VUE 3捕获错误并呈现另一个组件

使用领域Web SDK的Vite+Vue应用程序中的Web程序集(WASM)错误

如何将未排序的元素追加到数组的末尾?

映射类型定义,其中值对应于键

如何找到带有特定文本和测试ID的div?

JavaScript将字符串数字转换为整数

不协调嵌入图片

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

在没有任何悬停或其他触发的情况下连续交换图像

ComponentWillReceiveProps仍在React 18.2.0中工作

Chart.js Hover线条在鼠标离开时不会消失

在使用JavaScript以HTML格式显示Google Drive中的图像时遇到问题

react :图表负片区域不同 colored颜色