metoda filter, problem z rozwiązaniem zadania

0

Witam serdecznie, mam problem z teoretycznie prostym zadaniem. Prosta todolista, wyszukiwanie słów za pomocą fraz, metodą filter. Jednak nie wychodzi mi.
Dlaczego let tasks = [...liList]; zwraca tablicę 0 elementów, skoro użyłem getElementsByTagNames ? Co robię źle ?


<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Projekt - dodawanie zadań</title>
</head>

<body>
  <form action="">

    <input type="text">
    <button>Dodaj zadanie</button>
  </form>
  <input class='search' type="text">
  <h1>Liczba zadań: <span>0</span></h1>
  <ul></ul>
  <script src="freestyle.js"></script>
</body>

</html>

JS****

let toDoList = [];
const form = document.querySelector('form');
const tasksNumber = document.querySelector('h1 span');
const input = document.querySelector('input');
const ul = document.querySelector('ul');
const liElements = document.getElementsByClassName('task');
const inputSearch = document.querySelector('input.search');
const liList = document.getElementsByTagName('li');
let tasks = [...liList]
const addTask = (e) => {
  e.preventDefault();
  const taskTitle = input.value;
  if (taskTitle === "") return;
  const task = document.createElement('li');
  task.className = 'task';
  task.textContent = taskTitle;
  task.innerHTML = taskTitle + '<button> usuń zadanie</button>'
  ul.appendChild(task);
  input.value = "";
  tasksNumber.textContent = liElements.length;
  toDoList.push(task);
  task.querySelector('button').addEventListener('click', removeTask);
  clearList();
}
// 

// eliminujemy problem , który powodował nie po kolei indexy w data-key
const clearList = () => {
  ul.textContent = "";
  toDoList.forEach((li, key) => {
    li.dataset.key = key;
    ul.appendChild(li);
  })
}

const removeTask = (e) => {
  e.target.parentNode.remove();
  const index = e.target.parentNode.dataset.key;
  toDoList.splice(index, 1);
  tasksNumber.textContent = liElements.length;
  clearList();
}

const search = (e) => {

  const textInInput = e.target.value.toLowerCase();

  let tasks = [...liList];

  tasks = tasks.filter(li => li.textContent.toLowerCase().includes(textInInput));
  ul.textContent = '';
  tasks.forEach(li => ul.appendChild(li));



  // ul.textContent = '';

}

form.addEventListener('submit', addTask);
inputSearch.addEventListener('input', search);
0 
document.getElementsByTagName('li');

A widzisz w swoim HTML-u jakiś element «LI»? Bo ja widzę tylko puste «UL».
Więc prawidłowo dostajesz zero pozycji.

0
Freja Draco napisał(a):
document.getElementsByTagName('li');

A widzisz w swoim HTML-u jakiś element «LI»? Bo ja widzę tylko puste «UL».
Więc prawidłowo dostajesz zero pozycji.

Tak, elementy </li> dodają się dynamicznie po wpisaniu ich do inputa. Metoda getElementsByTagName pozwala pobrać dynamicznie zmieniającą się liczbę elementów li.

0
JCh napisał(a):
Freja Draco napisał(a):
document.getElementsByTagName('li');

A widzisz w swoim HTML-u jakiś element «LI»? Bo ja widzę tylko puste «UL».
Więc prawidłowo dostajesz zero pozycji.

Tak, elementy </li> dodają się dynamicznie po wpisaniu ich do inputa. Metoda getElementsByTagName pozwala pobrać dynamicznie zmieniającą się liczbę elementów li.

poczytaj o zmiennych lokalnych i globalnych, skąd masz informacje że metoda getElementsByTagName pozwala pobrać dynamicznie zmieniającą się liczbę elementów li ? nie jest to prawdą pobierze tylko raz na samym początku

1 użytkowników online, w tym zalogowanych: 0, gości: 1