Why is 'Null is not an Object' showing in console when there is an object?

user_10513050 0
Viewed 97

I am getting this error in my web console:

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

It is within a JavaScript file I have called landing.js and it is used for a custom select drop down. This is a photo of the error:

enter image description here

This is the raw code:

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");
    });
});

I don't understand why this error is happening because I have used this exact same code in a different project and it works. THe project is created in laravel and uses blade.php templates and this is the 3 different blade files:

  1. 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>
  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. 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>
laravel html php javascript
2 Answers

The most commons explaination is that const selected = document.querySelector(".selected"); returns null.

You can just check by adding

console.log({selected});

right after the definition.

So it can happen because you run this code before dom is ready, most common error when using JQuery. See the doc and put all your code inside

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

Element is not created yet. Include your script at the end of your body tag and it would solve your problem. Or you can wrap all your js code in a function and assign it to document.onload.

Like this:

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");
      });
  });
};
user_11674110
Related