Metoda filter, problem z wyszukiwaniem

0

Witam. Mam taki problem z todolistą. Kiedy wyszukuję jakąś frazę to pasujące zadanie zmienia kolor na czerwony i to wszystko działa ale wyszukiwarka uwzględnia także tekst z przycisku "usuń" a tego nie chcę i nie mogę sobie z tym poradzić.

<!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>Lista zadań</title>
</head>

<body>
    <form action="">
        <input type="text">
        <button>Dodaj zadanie</button>
    </form>
    <input class="search" type="text"><span> wyszukiwarka</span>
    <h1>Liczba zadań: <span>0</span></h1>
    <ul></ul>

    <script src="main.js"></script>
</body>

</html>
const toDoList = [];
const input = document.querySelector("input")
const inputSearch = document.querySelector(".search")
const ul = document.querySelector("ul")
const form = document.querySelector("form");
const taskNumber = document.querySelector("h1 span");
const listItems = document.getElementsByClassName("task");

const searchTask = (e) => {
    const searchText = e.target.value.toLowerCase();
    const find = toDoList.filter(li => li.textContent.toLowerCase().includes(searchText))
    toDoList.forEach(li => li.style.color = "black")
    find.forEach(li => li.style.color = "red")
    if (searchText === "") {
        toDoList.forEach(li => li.style.color = "black")
    };
}
const removeTask = (e) => {
    const index = e.target.parentNode.dataset.key;
    toDoList.splice(index, 1);
    renderList()
    taskNumber.textContent = listItems.length;
}
const addTask = (e) => {
    e.preventDefault();
    const titleTask = input.value;
    if (titleTask === "") return;
    const task = document.createElement("li");
    task.className = "task";
    task.innerHTML = titleTask + "<button>Usuń</button>";
    toDoList.push(task);
    renderList()
    ul.appendChild(task);
    input.value = "";
    taskNumber.textContent = listItems.length;
    task.querySelector("button").addEventListener("click", removeTask);
}
const renderList = () => {
    ul.textContent = "";
    toDoList.forEach((toDoElement, key) => {
        toDoElement.dataset.key = key;
        ul.appendChild(toDoElement);
    })
}
form.addEventListener("submit", addTask)
inputSearch.addEventListener("input", searchTask)
1

Wygląda znajomo, przypadek :)?

const toDoList = [];

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const taskNumber = document.querySelector('h1 span');
const listItems = document.getElementsByClassName('task');
const input = document.querySelector('input');
const inputSearch = document.querySelector('input.search');
let searchText = "";

const removeTask = (e) =>
{
    e.target.parentNode.remove();
    const index = e.target.parentNode.dataset.key;
    toDoList.splice(index, 1);
    taskNumber.textContent = listItems.length;
    renderList();
}

const addTask = (e) =>
{
    e.preventDefault()
    const titleTask = input.value;
    if (titleTask === "") return;
    const task = document.createElement('li');
    task.className = 'task';
    task.innerHTML = titleTask + " <button>Usuń</button>";
    task.dataset.isVisible = true;
    task.dataset.text = titleTask.toLowerCase();
    toDoList.push(task);
    task.querySelector('button').addEventListener('click', removeTask);
    renderList(); 
    input.value = "";
}

const searchTask = (e) => 
{
    searchText = e.target.value.toLowerCase()
    toDoList.forEach(x => x.dataset.isVisible = x.dataset.text.includes(searchText)); 
    renderList();
}

const renderList = () =>
{
    ul.textContent = "";
    //const filteredList = toDoList.filter(x => x.dataset.isVisible == 'true');
    
    //filteredList.forEach((toDoElement, key) =>
    //{       
    //    toDoElement.dataset.key = key;
    //    ul.appendChild(toDoElement);
    //});
	
	toDoList.forEach((toDoElement, key) =>
    {    
        toDoElement.style.color = (toDoElement.dataset.isVisible == 'true' && searchText !== "") ? "red" : "black";
        toDoElement.dataset.key = key;
        ul.appendChild(toDoElement);
    });

    taskNumber.textContent = toDoList.length;
} 
   
form.addEventListener('submit', addTask);
inputSearch.addEventListener('input', searchTask);

https://jsfiddle.net/haox6w04/

0

To z zadania z kursu

0

U mnie też działa ale jak przeszukuje moją listę to uwzględnia mi litery które są w przycisku a tego właśnie nie chcę. A może muszę inaczej sformułować zmienną task?

0

Musisz sobie opakować nazwę zadania w dodatkowy element, który później łatwo wyodrębnisz bez tego przycisku. Np. owiń go SPANem:

linia 30 przed:

task.innerHTML = titleTask + "<button>Usuń</button>";

linia 30 po:

task.innerHTML = "<span>"+titleTask+"</span>" + "<button>Usuń</button>";

i póżniej filtruj po li>span:

linia 11 przed:

const find = toDoList.filter(li => li.textContent.toLowerCase().includes(searchText))

linia 11 po:

const find = toDoList.filter(li => li.querySelector("span").textContent.toLowerCase().includes(searchText));
1

Dzięki za poradę. Generalnie problem już jest rozwiązany bo dostałem wczoraj odpowiedź na udemy a tutaj jeszcze nie zdążyłem napisać. Gdyby ktoś potrzebował to ja mam jeszcze 2ie metody:
''' JavaScript
const find = toDoList.filter(li => li.childNodes[0].textContent.toLowerCase().includes(searchText))
'''
''' JavaScript
const find = toDoList.filter(li => li.firstChild.textContent.toLowerCase().includes(searchText))
'''
Jeszcze raz dziękuję i pozdrawiam

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