Problem z javascriptem (addavenetlistener)

0 
"Cześc jestem początkujacym programista i nie mam pojecia dlaczego ten kod nie dziala. Wydaje mi sie że js nie odczytuje wartosci bardzo prosze o pomoc :

JS 
const opensidebar = document.querySelector(".SideBarOn");
const closesidebar = document.querySelector(".CloseSideBar");
const sidebar = document.querySelector(".sidebar");




opensidebar.addEventListener("click", function(){
    console.log(sidebar.classList);
    sidebar.classList.toggle(".sidebaropen");
} )

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SideBar</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://kit.fontawesome.com/32ad694bc9.js" crossorigin="anonymous"></script>
</head>
<body>
    
        <header>
            <h1 class="logo">BestSidebar</h1>

            <button class="SideBarOn">
                <i class="fas fa-align-justify"></i>
            </button>
        </header>


        <aside class="sidebar">
            <div class="buttondiv">
                <button class="CloseSideBar">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <ul class="links">

                <li><a href="#">Home</a> </li>
                <li><a href="#">Gallery</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
            
            <div class="social-media">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-twitter-square"></i>
                <i class="fab fa-youtube"></i>

            </div>



        </aside>



</body>
</html>"```
0
  1. Sformatuj kod żeby dało się go przeczytać (użyj "Kod źródłowy" w edycji)
  2. Zapoznaj się z https://kursjs.pl/kurs/debuger/debuger.php#zakladka-console
  3. Sprawdź jaki błąd wyświetla Ci się w konsoli
0

Wyświetla się błąd script.js:8 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:8 tak jakby nie dzialaly zmiennie z querryselector

1

Poukładaj ten kod i na 100% wszystko zadziała.
Wczystujesz JS zanim istnieje drzewo DOM wynikające z HTML.
Powinieneś skrypt wrzucić do onLoad lub na końcu strony.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SideBar</title>
    <link rel="stylesheet" href="style.css">

    <script src="https://kit.fontawesome.com/32ad694bc9.js" crossorigin="anonymous"></script>
</head>
<body>

  <header>
      <h1 class="logo">BestSidebar</h1>

      <button class="SideBarOn">
          <i class="fas fa-align-justify"></i>
      </button>
  </header>

  <aside class="sidebar">
    <div class="buttondiv">
        <button class="CloseSideBar">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <ul class="links">

        <li><a href="#">Home</a> </li>
        <li><a href="#">Gallery</a> </li>
        <li><a href="#">About</a> </li>
        <li><a href="#">Contact</a> </li>
    </ul>

    <div class="social-media">
        <i class="fab fa-facebook"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-youtube"></i>
    </div>
  </aside>

  <script>
    const opensidebar = document.querySelector(".SideBarOn");
    const closesidebar = document.querySelector(".CloseSideBar");
    const sidebar = document.querySelector(".sidebar");
    console.log( "co tu mamy:", sidebar.classList);

    opensidebar.addEventListener("click", function(){        
      sidebar.classList.toggle(".sidebaropen");
      console.log( "Po kliknięciu:", sidebar);
    } )
  </script>
        
</body>
</html>
1

Obecnie można zrobić to tak <script src="script.js" defer></script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1