IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

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
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.