NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: TypeError: document.querySelector(...) is null

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Martin Suchodol
Člen
Avatar
Martin Suchodol:20.6.2022 8:32

Ahoj, předem chci říct že s JavaScriptem se moc nekamarádím. Ale občas není zbytí. Vytvářím modal, který mi ale z nějakého důvodu hlásí že element #show_modal neexistuje

HTML:

<div class="content">
  <button id="show_modal">Learn more</button>
</div>
<div class="modal modal_hidden">
  <div class="modal_contents">
    <div class="modal_close">
      <span>X</span>
    </div>
    <p>This is modal content</p>
  </div>
</div>

JS:

const toggleModal = () => {
    document.querySelector('.modal')
      .classList.toggle('modal_hidden');
}

document.querySelector('#show_modal')
    .addEventListener('click', toggleModal)

document.querySelector('.modal_close')
    .addEventListener('click', toggleModal)

A z nějakého důvod mi konzole v prohlížeči hází tuto chybu: TypeError: document.query­Selector(...) is null. Přestože daný element existuje

 
Odpovědět
20.6.2022 8:32
Avatar
Ondřej Šrytr
Člen
Avatar
Ondřej Šrytr:20.6.2022 12:28

Ahoj,

chyba bude nejspíš způsobena tím, že document.query­Selector('#show_m­odal') voláš ještě předtím, než nějaký '#show_modal' vůbec existuje. Tzn. tvůj JS kód bys měl volat buď po zmiňované HTML části nebo při události dokončení načtení stránky (např. DOMContentLoaded).

 
Nahoru Odpovědět
20.6.2022 12:28
Avatar
Martin Suchodol
Člen
Avatar
Odpovídá na Ondřej Šrytr
Martin Suchodol:20.6.2022 12:37

Ahoj, přesně v tom byla chyba. Ale jak jsem psal s JS se moc nekamarádím takže takováhle trivialita mi zabrala celkem dost času než jsem na tom přišel. Problém byl i v tom že u tohoto:

document.querySelector('#show_modal')
    .addEventListener('click', toggleModal)

jsem před addEventListener zapoměl dát tečku, a víceméně to fungovalo, pak jsem si toho všiml a tečku dopsal. Pokud opomenu to že se modál otevřel a zavřel po kliknutí kamkoliv. Tak mě ani hned netrklo že bych nařed měl ty elementy deklarovat.

 
Nahoru Odpovědět
20.6.2022 12:37
Avatar
Ondřej Šrytr
Člen
Avatar
Ondřej Šrytr:20.6.2022 12:50

Pro lepší přehlednost je dobré to napsat na jeden řádek. Pak chybějící tečka bude jasně vidět.

document.querySelector('#show_modal').addEventListener('click', toggleModal)

Nejsem zastáncem rozdělení na řádky, jako máš ty, ale třeba ti to vyhovuje více. Nebál bych se i používat středíky, z kódu je pak jasné, kde přesně příkaz končí.

 
Nahoru Odpovědět
20.6.2022 12:50
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.6.2022 15:47

Mi ten kod funguje, ale musel jsem si ho doplnit. Takze, jestli to mas jinak, tak je mozne, ze ho mas spatne :)
Doporucuji tagy script volat az pred koncem /body.
https://jsfiddle.net/jesbxwky/

<style>.modal_hidden{display:none;}</style>
<div class="content">
  <button id="show_modal">Learn more</button>
</div>
<div class="modal modal_hidden">
  <div class="modal_contents">
    <div class="modal_close">
      <span>X</span>
    </div>
    <p>This is modal content</p>
  </div>
</div>

<script>
const toggleModal = () => {
    document.querySelector('.modal')
      .classList.toggle('modal_hidden');
}

document.querySelector('#show_modal')
    .addEventListener('click', toggleModal)

document.querySelector('.modal_close')
    .addEventListener('click', toggleModal)
    </script>
Editováno 20.6.2022 15:48
 
Nahoru Odpovědět
+1
20.6.2022 15:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.