为什么当有一个对象时控制台中会显示“Null 不是对象”？
2020-11-26
320
我的 Web 控制台中出现此错误：
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>
- 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
- landing_body.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>
2个回答
最常见的解释是
const selected = document.querySelector(".selected");
返回 null。
您只需在定义后添加
console.log({selected});
即可进行检查。
因此，这种情况可能发生，因为您在 dom 准备好之前运行此代码，这是使用 JQuery 时最常见的错误。请参阅 doc 并将所有代码放入其中
$( document ).ready(function() {
// All your code here
});
farvilain
2020-11-26
元素尚未创建。
在 body 标签末尾添加脚本即可解决您的问题。
或者，您可以将所有 js 代码包装在一个函数中，并将其分配给
document.onload
。
像这样：
document.onload = function(){
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");
});
});
};
Zibx
2020-11-26