• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyszukiwarka To-do list

VPS Starter Arubacloud
+1 głos
257 wizyt
pytanie zadane 9 kwietnia 2021 w JavaScript przez Ziom54d4 Początkujący (350 p.)
edycja 9 kwietnia 2021 przez Ziom54d4

Witam!
Tworząc To-do list natknąłem się na jeden problem związany z wyszukiwarką poszczególnych zadań. W momencie kiedy wyszukuje daną frazę wyświetla się zadanie (lub kilka zadań) i gdy go usuwam to reszta zadań która nie została wyświetlona (bo nie pasowała do wpisanego tekstu) zostaje usunięta tak jakby wcześniej nie została dodana. Prosiłem już o pomoc ale jedyną wskazówkę jaką dostałem to to że powinienem działać na niezmienionej tablicy taskList ale niewiele mi to pomogło.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <title>ToDoList</title>
    <style>
        li {
            padding: 5px;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="text"> <button class="addTask">Dodaj zadanie</button>
        <input type="text" name="search" placeholder="Wyszukaj zadanie">
    </form>
    <h1>Liczba zadań:<span> 0 </span></h1>
    <ul>
        
    </ul>
    <script src="main.js"></script>
</body>
</html>
const form = document.querySelector("form");
const input = document.querySelector("input");
const buttonTask = document.querySelector("button.addTask");
const searchInput = document.querySelector('input[name="search"]');
let taskNumber = document.querySelector("h1 span");
const ul = document.querySelector("ul");
let taskList;

const removeTask = (e) => {
    e.target.parentNode.remove();
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
}

const addTask = (e) => {
    e.preventDefault();
    const task = input.value;
    if(task === "") return;
    const liElement = document.createElement("li");
    liElement.innerHTML = task + " <button>Usuń</button>";
    liElement.className = "task";
    ul.appendChild(liElement);
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
    input.value = ``;
    liElement.querySelector("button").addEventListener("click",removeTask);
}

const searchTask = (e) => {
    const nameTask = e.target.value.toLowerCase();
    let tasks = [...taskList];
    tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));
    ul.textContent = "";
    tasks.forEach(li => ul.appendChild(li));
    let numberTask = tasks.filter(li => li.style.display = "block");
    taskNumber.textContent = ` ${numberTask.length} `;
}

form.addEventListener("submit", addTask);

searchInput.addEventListener("input",searchTask);

 

2 odpowiedzi

0 głosów
odpowiedź 10 kwietnia 2021 przez VBService Ekspert (251,210 p.)
wybrane 10 kwietnia 2021 przez Ziom54d4
 
Najlepsza

Problem był, że w momencie, gdy flitowałeś listę <ul> wartością z <input type="text" name="search" ...>

tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));

"zerowałeś" bezpowrotnie listę <ul>, przecież chodzi tylko o "ukrycie, nieszukanych" elementów <li>

ul.textContent = "";

 dodałem, gdy <ul> jest puste to "nic nie rób"

if (ul.textContent.trim() != "") {
  . . .
}

 

Spróbuj wink

const searchTask = (e) => {  
  if (ul.textContent.trim() != "") {
    const nameTask = e.target.value.toLowerCase();
    let tasks = [...taskList];
    tasks = tasks.filter(li => li.textContent.toLowerCase().includes(nameTask));
    // ul.textContent = "";
    const li_hidden = document.querySelectorAll("ul li");
    li_hidden.forEach(li => li.style.display = "none");
    tasks.forEach(li => ul.appendChild(li));
    let numberTask = tasks.filter(li => li.style.display = "block");
    taskNumber.textContent = ` ${numberTask.length} `;
  }
}

"Kosmetyczne" poprawki - propozycje.  wink

const removeTask = (e) => {
    e.target.closest('li.task').remove();  
    taskList = document.querySelectorAll(".task");
    taskNumber.textContent = ` ${taskList.length} `;
} 
    <h1>Liczba zadań: <span>0</span></h1>
    <ul></ul>
    <script src="main.js"></script>

 

1
komentarz 10 kwietnia 2021 przez Ziom54d4 Początkujący (350 p.)
Dziękuję serdecznie za pomoc i wskazówki :)
0 głosów
odpowiedź 9 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)

Witaj,

Mógłbyś udostępnić cały kod(w szczególności HTML)? Podejrzewam, że problem tkwi w tym, że pobierana jest lista tasków(taskList) za każdym razem, gdy wywoływana jest funkcja removeTask - więc gdy taski są ukryte(działanie funkcji searchTask), i użytkownik usuwa widoczy element, to do zmiennej taskList jest przypisywana jest tablica obecnie widocznych tasków minus ten usunięty i daltego znikają pozostałe(ukryte) zadania, jednak bez "dotknięia" kodu nie moge potwierdzić, czy ta teoria jest prawdziwa

komentarz 9 kwietnia 2021 przez Ziom54d4 Początkujący (350 p.)
Już dodałem HTML i Twoje spostrzeżenie jest chyba prawdziwe, aczkolwiek nie wiem jak temu zaradzić. Im więcej kodu tym bardziej się w nim gubię.

Podobne pytania

0 głosów
1 odpowiedź 190 wizyt
0 głosów
1 odpowiedź 315 wizyt
pytanie zadane 6 stycznia 2018 w C# przez macik1423 Początkujący (480 p.)
+2 głosów
2 odpowiedzi 533 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...