Przejdź do głównej zawartości

Bug #013

🪲 Znajdź buga​

document.body.innerHTML = `
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
`

const lis = document.querySelectorAll("li")

lis.map((li) => {
  const updatedText =
    li
    .innerText
    .replace("Item", "Element")

  li.innerText = updatedText
})

W dokumencie mamy listę <ul> z elementami <li>. Chcemy zaktualizować tekst w tych elementach, zamieniając wyrazy Item na Element.

Gdzie w przedstawionym przykładzie wkradł się błąd?

🧪 Rozwiązanie​

document.body.innerHTML = `
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
`

const lis = document.querySelectorAll("li")

lis.forEach((li) => {
  const updatedText = li.innerText.replace("Item", "Element")

  li.innerText = updatedText
})

Próbując wykonać kod z przykładu z błędem, ujrzymy w konsoli Error: lis.map is not a function.

Do stałej lis chcieliśmy przypisać listę z elementami li i do tego momentu kod wykonywany jest poprawnie.

Jednak document.querySelector() nie tworzy kolekcji w formie Array, a jako NodeList.

Obiekt NodeList w przeciwieństwie do obiektu Array nie zawiera metody map, więc wyrzucany jest błąd.

NodeList zawiera jednak metodę forEach, której możemy użyć zamiast map.

Użycie map było tutaj bezzasadne. Nie potrzebujemy wygenerować nowej tablicy z elementami na podstawie istniejącej.

Jeśli jednak mielibyśmy faktyczną potrzebę użycia map na obiekcie NodeList to musimy go skonwertować do Array, najprościej za pomocą konstrukcji Array.from(lis).

Po takiej konwersji, lista węzłów (node'ów) będzie już obiektem Array razem ze wszystkimi dostępnymi w tym obiekcie metodami (jak np. map).

🎢 Plac zabaw​

Otwórz edytor w nowym oknie

📑 Linki​

❤️ Podobają Ci się bugi JS?​

Podziel się linkiem ze znajomymi:
https://codisity.pl/100-bugow-js