Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why isn't the defer working in this case on my laravel project?

I’m using a layout template to yield scripts and content as follows:

<!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>

Then in my blade.php I have the following:

@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

The input has a value, and my script works if I place it underneath my input. But when I add my script through sections, it loads the script before my html and gives an "undefined" error because my input hasn’t loaded yet even though I’m using the ‘defer’ attribute ..

So I’m just trying to get my script to work after page load using the sections to place it in the head of my html. But it keeps loading if before it renders my html, even using the defer attribute.

Tags:

2

Answers


  1. 0 
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        let dateInput = document.getElementById('reservationDate');
        alert(dateInput.value);
    });
</script>
    Login or Signup to reply.
  2. 0

    If you take a look at the MDM web docs you will notice the warning

    Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search