• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dlaczego document.querySelector zwraca null?

VPS Starter Arubacloud
0 głosów
306 wizyt
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

+1 głos
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.)

@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 (599,730 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ć :)
0 głosów
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 337 wizyt
0 głosów
2 odpowiedzi 353 wizyt
pytanie zadane 29 marca 2016 w JavaScript przez adojado Początkujący (420 p.)
0 głosów
1 odpowiedź 1,525 wizyt
pytanie zadane 25 marca 2016 w JavaScript przez RedMartin Użytkownik (640 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...