时间戳

首页 > 解决方案 > 为什么有对象时控制台中显示“Null is not an Object”？

javascript - 为什么有对象时控制台中显示“Null is not an Object”？

问题描述

我在我的 Web 控制台中收到此错误：

null is not an object (evaluating 'selected.addEventListener')

它位于我调用的 JavaScript 文件中landing.js，用于自定义选择下拉菜单。这是错误的照片：

在此处输入图像描述

这是原始代码：

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");

selected.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
});

optionsList.forEach( o => {
    o.addEventListener("click", () => {
        selected.innerHTML = o.querySelector("label").innerHTML;
        optionsContainer.classList.remove("active");
    });
});

我不明白为什么会发生这个错误，因为我在不同的项目中使用了完全相同的代码并且它有效。该项目是在 laravel 中创建并使用blade.php模板，这是 3 个不同的刀片文件：

  1. 网页模板.blade.php：
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Mobile Masters Shop" content="This is the header section  for the shop in mobile masters">
    <meta name="author" content="Ross Currie">
    <meta name="description" content="Mobile Gaming Accessories">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="keywords" content="Ferg, iFerg, Gaming, Mobile, Accessories, Youtube, Mobile Master, Shop">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Mobile Mastery') }} | @yield('title')</title>

    <!-- Scripts -->
    @yield('scripts')

    <!-- Styles -->
    @yield('design')
    <link href="{{ asset('design/Add_Ons/Animations.css') }}" rel="stylesheet">
    <link href="{{ asset('design/Add_Ons/Fonts.css') }}" rel="stylesheet">
</head>

<body>
<div class="app" id="app">
    @if(str_contains(url()->current(), '/'))
        @include('body.landing_body')
    @endif
</div>
</body>
</html>
  1. Landing_header.blade.php
@extends('webpageTemplate')

@section('title')
    Home
@endsection

@section('scripts')
    <script src="{{ asset('scripts/landing.js') }}"></script>
    <script src="https://kit.fontawesome.com/11bae6a58f.js" crossorigin="anonymous"></script>
@endsection

@section('design')
    <link href="{{ asset('design/landing/Landing_Main.css') }}" rel="stylesheet">
    <link href="{{ asset('design/landing/Landing_Responsive.css') }}" rel="stylesheet">
@endsection
  1. 着陆体.blade.php
<!-- Container to position stuff in middle of screen -->
<div class="centerScreen">
    <div class="logo">
        <div>
            <img class="logoWidth rotate-center" src="{{ asset('img/logo/IconOnly.png') }}" alt="Mobile Mastery Icon">
        </div>

        <div class="title">
            <img class="logoNameWidth" src="{{ asset('img/logo/LogoNameWhite.png') }}" alt="Mobile Mastery Title">
        </div>

        <div class="CountryInput">
            <div class="select-box">
                <div class="options-container">
                    <div class="option">
                        <input type="radio" class="radio" id="United States" name="country"> <label for="United States">United States</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="United Kingdom" name="country"> <label for="United Kingdom And Ireland">United Kingdom And Ireland</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Philippines" name="country"> <label for="Philippines">Philippines</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="India" name="country"> <label for="India">India</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Indonesia" name="country"> <label for="Indonesia">Indonesia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Malaysia" name="country"> <label for="Malaysia">Malaysia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Mexico" name="country"> <label for="Mexico">Mexico</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Singapore" name="country"> <label for="Singapore">Singapore</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Germany" name="country"> <label for="Germany">Germany</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Brazil" name="country"> <label for="Brazil">Brazil</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Canada" name="country"> <label for="Canada">Canada</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Italy" name="country"> <label for="Italy">Italy</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Colombia" name="country"> <label for="Colombia">Colombia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Australia" name="country"> <label for="Australia">Australia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="South Africa" name="country"> <label for="South Africa">South Africa</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="France" name="country"> <label for="France">France</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Pakistan" name="country"> <label for="Pakistan">Pakistan</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Bangladesh" name="country"> <label for="Bangladesh">Bangladesh</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Spain" name="country"> <label for="Spain">Spain</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="United Arab Emirates" name="country"> <label for="United Arab Emirates">United Arab Emirates</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Netherlands" name="country"> <label for="Netherlands">Netherlands</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Sri Lanka" name="country"> <label for="Sri Lanka">Sri Lanka</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Russia" name="country"> <label for="Russia">Russia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Trinidad & Tobago" name="country"> <label for="Trinidad & Tobago">Trinidad & Tobago</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Saudi Arabia" name="country"> <label for="Saudi Arabia">Saudi Arabia</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Thailand" name="country"> <label for="Thailand">Thailand</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Peru" name="country"> <label for="Peru">Peru</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="New Zealand" name="country"> <label for="New Zealand">New Zealand</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Vietnam" name="country"> <label for="Vietnam">Vietnam</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Japan" name="country"> <label for="Japan">Japan</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Egypt" name="country"> <label for="Egypt">Egypt</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Argentina" name="country"> <label for="Argentina">Argentina</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Helpful Links" name="Helpful Links"> <label for="Other">Helpful Links</label>
                    </div>

                    <div class="option">
                        <input type="radio" class="radio" id="Other" name="country"> <label for="Other">Other...</label>
                    </div>
                </div>

                <div class="selected">
                    Select Country To Continue:
                </div>
            </div>
        </div>

        <button onclick="goAfterSelect()" class="landingButton">
            Continue <span class="far fa-arrow-alt-circle-right continue-arrow"></span>
        </button>
    </div>
</div>

标签： javascriptphphtmllaravel

解决方案

最常见的解释是const selected = document.querySelector(".selected");返回 null。

您可以通过添加来检查

console.log({selected});

在定义之后。

所以它可能会发生，因为您在 dom 准备好之前运行此代码，这是使用 JQuery 时最常见的错误。查看文档并将所有代码放入其中

$( document ).ready(function() {
  // All your code here
});

推荐阅读