Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:4

Imi tot apare acest mesaj si nu stiu ce sa ii fac. Tocmai incepeam sa invat sa fac un website folosind HTML, CSS si Javascript, deci am folosit codurile intocmai ca in tutorial si tot nu vrea sa mearga. Aveti vreo idee?

<ul class="nav-list">
  <div class="menu-icons close">
    <i class="icon ion-md-close"></i>
  </div>
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Destination</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Pricing</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Booking</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About Us</a>
  </li>
    </ul>

Acesta e codulin HTML



.nav-list{
  width: 25rem;
  height: 100vh;
  background: #d7d4ed ;
  position: fixed;
  top: 0;
  right: -26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  transition: all 650ms ease-in-out;
}
.nav-list.active{
  right: 0;
}
.close{
  position: absolute;
  top: 1rem;
  left: 1.5rem;
}
Acesta este codul CSS




// function expression to selsct elements
const selectElement = (S) => document.querySelector(S);
// Open the menu on click
selectElement('.open').addEventListener('click', () => { selectElement('.nav-list').classList.add('active'); });
// Close the menu on click
selectElement('.close').addEventListener('click', () => { selectElement('.nav-list').classList.remove('active'); });
Iar acesta este codul js

Nu ai clasa .open în css, și nici n-o folosești nicăieri în html. N-ai ce element să selectezi.

Am mai cautat pe net ce as putea face si dupa multe cautari am gasit "buba". Nu ma gandeam ca Js e ataaatt de sensibil. Problema era ca am pus conectarea cu js inainte de body, dar ca sa il citeasca cum trebuie, el trebuia folosit la final de body.