Dlaczego document.querySelector zwraca null?

pytanie zadane 24 września 2020 w JavaScript przez Kubs Mądrala (5,190 p.)

Witajcie,

próbuje pobrać element DOM

const hamburger = document.querySelector('.hamburger');

i mimo, że jest ustawiony poprawnie

 <button class="hamburger">
     <span class="hamburger__box">
       <span class="hamburger__inner"></span>
     </span>
 </button>

.hamburger {
  padding: 40px;
  display: inline-block;
  cursor: pointer;
  background-color: blue;
  border: 0;
  margin: 0;
}

wywala mi w konsoli Uncaught TypeError: hamburger is null

2 odpowiedzi

odpowiedź 24 września 2020 przez creend Gaduła (4,700 p.)

w którym miejscu dodajesz skrypt js do strony?

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

W head zaraz po stylach

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="main.js"></script>

1	komentarz 24 września 2020 przez creend Gaduła (4,700 p.) I tu jest błąd. Dodaj plik JS na samym końcu body lub dodaj defer do scriptu <script src="main.js" defer></script>

komentarz 24 września 2020 przez senpai desu Mądrala (5,720 p.)

jeśli jest błąd to znaczy, że skrypt się uruchamia, pokaż więcej kodu, w konsoli w inspektorze wklej console.log(document.querySelector('.hamburger'));

co się wyświetla??

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

Kurcze, rzeczywiście. A dlaczego musi być na końcu?

Dziękuję.

komentarz 24 września 2020 przez creend Gaduła (4,700 p.)

Jeśli script znajduje się w headzie pobierasz element burger zanim DOM się załaduje. Jeśli zaś w body to skrypt załaduje się dopiero gdy pobrany zostanie DOM

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

@senpai desu, rzeczywiście źle umieściłem script js w html-u jak wskazał creend. Dzięki serdeczne za zainteresowanie.

komentarz 24 września 2020 przez senpai desu Mądrala (5,720 p.)

bo przeglądarka potrafi uruchamić skrypt zanim DOM będzie gotow, może rada kolegi dotycząca defer pomoże

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

@creend, Nic dodać, nic ująć. Wszystko jasne. Dziękuję.

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

@senpai desu, Dzięki.

komentarz 24 września 2020 przez Comandeer Guru (601,590 p.)

@senpai desu, nie tyle umie, co po prostu to robi, jeśli skrypt nie jest oznaczony jako asynchroniczny. Addy Osmani ma dobre podsumowanie, jak są wczytywane skrypty: https://addyosmani.com/blog/script-priorities/

komentarz 24 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Addy Osmani ma dobre podsumowanie, jak są wczytywane skrypty

Ciekawe, jaki jest sens umieszczania skryptu z atrybutem defer pod koniec <body>, skoro można to zrobić w <head> (+ defer), dzięki czemu skrypt będzie miał więcej czasu na pobranie się (bo zacznie się wcześniej). I podobnie - jaki jest sens deferowania skryptu pod koniec </body> - tutaj przychodzi mi do głowy, że defer (przynajmniej w teorii) gwarantuje wykonanie skryptu przed eventem DOMContentLoaded?

komentarz 25 września 2020 przez Kubs Mądrala (5,190 p.)

Jak zwykle ciekawie i jak zwykle ciężko mi zrozumieć :)

odpowiedź 24 września 2020 przez senpai desu Mądrala (5,720 p.)

Hej zamieść więcej kodu, jak używasz tego const hamburger ?? co jest w wierszu który zwraca błąd? Możesz zrobić console.log(hamburger) ; pod wierszem w którym wyszukujesz ten element

komentarz 24 września 2020 przez Kubs Mądrala (5,190 p.)

Właśnie tak zrobiłem i mam ten błąd - umieściłem log-a pod tą zmienną.

const hamburger = document.querySelector('.hamburger');
console.log (hamburger);

Podobne pytania

0 głosów

0 odpowiedzi 364 wizyt

JavaScript -> document.querySelector nie działa z backtickami i zmiennymi

pytanie zadane 23 września 2021 w JavaScript przez Doge Gaduła (3,370 p.)

0 głosów

2 odpowiedzi 358 wizyt

TypeError: document.getElementById(...) is null

pytanie zadane 29 marca 2016 w JavaScript przez adojado Początkujący (420 p.)

0 głosów

1 odpowiedź 1,539 wizyt

JS - TypeError: document.getElementById(...) is null

pytanie zadane 25 marca 2016 w JavaScript przez RedMartin Użytkownik (640 p.)

Dlaczego document.querySelector zwraca null?

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci