我在网络控制台中收到此错误:
null is not an object (evaluating 'selected.addEventListener')
它位于我称为 landing.js 的 JavaScript 文件中，用于自定义选择下拉列表。这是错误的照片:
这是原始代码:
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 个不同的 Blade 文件:
- webpageTemplate.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>
@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
<!-- 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>
最佳答案
最常见的解释是 const selected = document.querySelector(".selected"); 返回 null。
您只需添加即可检查
console.log({selected});
就在定义之后。
之所以会发生这种情况，是因为您在 dom 准备好之前运行了此代码，这是使用 JQuery 时最常见的错误。请参阅doc并将所有代码放入其中
$( document ).ready(function() {
// All your code here
});
关于javascript - 为什么有对象时控制台中显示 'Null is not an Object'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65027939/