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);