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

JavaScript problem z aplikajcą! Proszę o Pomoc!

VPS Starter Arubacloud
+1 głos
167 wizyt
pytanie zadane 11 października 2020 w JavaScript przez niezalogowany
   <button id="add">Dodaj nowy element</button>
    <ul id="list">
        <li>
            Element 1 <button data-delete>Usun</button>
        </li>
    </ul>
const addButton = document.getElementById('add');
const list = document.getElementById('list');
let counter = 1;
addButton.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `element ${++counter}`;
    const button = document.createElement('button');
    button.textContent = 'Usun';
    button.dataset.action = 'delete';
    li.appendChild(button)
    list.appendChild(li)
});

list.addEventListener('click', e => {
    if (e.target.dataset.action === 'delete') {
        e.target.parentNode.remove();
    }
});


Aplikacja ma dodawać oraz usuwać z Listy, wszystkie elementy ! Włączając w to ELEMENT 1 !!!!

Problem polega na tym że ELEMENT 1  nie można ususnąć!

Dlaczego to nie działa !? Używam VSC, Live Server , Firefox. scrypt js podpięty na koncu body.

Proszę o Pomoc i życzę miłego dnia!

 

komentarz 11 października 2020 przez VBService Ekspert (251,210 p.)
edycja 11 października 2020 przez VBService

Czy zmienna counter nie powinna przy okazji być "ustawiona" na "zero", gdy lista jest pusta?

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove(); 
    }
});

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove();
        if (list.childElementCount == 0)  {
          counter = 0;
        } 
    }
});

 

komentarz 11 października 2020 przez hoktaur Pasjonat (22,250 p.)
ja bym tam liczył ilość elementów po każdym dodaniu i odejmowaniu pkt albo ...

odejmował counter przy każdym usuwaniu,

ale to już zależy od podejścia i potrzeby do czego kod jest potrzebny i jaką rolę pełni ta zmienna :)

2 odpowiedzi

+3 głosów
odpowiedź 11 października 2020 przez hoktaur Pasjonat (22,250 p.)
wybrane 11 października 2020 przez ScriptyChris
 
Najlepsza
<ul id="list">
     <li>
         Element 1 <button data-delete="">Usun</button>
     </li>
 <li>element 3<button data-action="delete">Usun</button></li></ul>

znajdź różnice :)

poprawnie według twojego pomysłu

<button id="add">Dodaj nowy element</button>
 <ul id="list">
     <li>
         Element 1 <button data-action="delete">Usun</button>
     </li>
 </ul>

 

2
komentarz 11 października 2020 przez niezalogowany

Gratuluje serdecznie i Dziękuję za poprawną odpowiedz ! Właśnie wspólnymi siłami (Pan 75%cool ja 25%angel) naprawiliśmy błąd kodu z przykładu  książki "JavaScript Interaktywne aplikacje webowe".T.Sochacki.

Kod znajduje się na stronie 71(html)/72(js)tejże książki !

Z mojej strony wypada Podziękować raz jeszcze i życzyć Owocnego dnia!
Pozdrawiam Serdecznie yeswink

 

komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

naprawiliśmy błąd kodu z przykładu  książki

Jeśli jest to faktycznie błąd merytoryczny, to miło by było powiadomić o tym autora książki. ;) Podpowiem, że jest On obecny na tym forum. 

komentarz 11 października 2020 przez niezalogowany

Nie śmiem....angel

1
komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
Jeśli to nie jest sarkazm, to nie rozumiem dlaczego? Jeśli ktoś popełnił błąd, to można mu o tym po prostu powiedzieć. Nie popełnia błędów ten, kto nic nie robi. :P
komentarz 11 października 2020 przez niezalogowany

Żaden sarkazm.smiley Ja po prostu zaczynam poznawać JS....Gdybym miał kontakt do autora  pewnie bym się z nim tą wiedzą podzielił....laugh

komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Ja po prostu zaczynam poznawać JS

Dlatego napisałem - jeśli jest to faktycznie błąd w książce. Tego też dowiesz się kontaktując się z Tomkiem. ;)

Gdybym miał kontakt do autora

Przecież podlinkowałem Ci jego profil.

2
komentarz 11 października 2020 przez niezalogowany

HAHAHAH  Dziękuje i Przepraszam!laugh oczy nie te cool

komentarz 11 października 2020 przez hoktaur Pasjonat (22,250 p.)

@ScriptyChris,

Nie popełnia błędów ten, kto nic nie robi. :P

 nie prawda wszystko zależy od oceniającego, który może zawsze powiedzieć że błędem było 'nic nie robienie' :)

komentarz 11 października 2020 przez Tomek Sochacki Ekspert (227,510 p.)
Heh tak to jest jak się kopiuje kod miedzy codepen j wordem piętnaście razy w te i spowrotem i potem robi zmiany po korektach... dzieki za zlokalizowanie błędu i znalezienie problemu. Szkoda, że książek nie da się tak szybko poprawić...
komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Szkoda, że książek nie da się tak szybko poprawić...

Można wydać reedycję z poprawkami i dodatkową treścią, na którą zabrakło czasu/pomysłów/motywacji w pierwotnej wersji. ;) 

komentarz 11 października 2020 przez Tomek Sochacki Ekspert (227,510 p.)
Nie chciałbym wchodzić w szczegóły, ale niestety nie zawsze jest to takie proste... tym bardziej gdy już jest wydrukowany duży nakład :)
0 głosów
odpowiedź 11 października 2020 przez VBService Ekspert (251,210 p.)
edycja 11 października 2020 przez VBService

[Edit] Spróbuj tak:

<button id="add">Dodaj nowy element</button>
 <ul id="list"></ul>
const addButton = document.getElementById('add');
const list = document.getElementById('list');
let counter = 0;
addButton.addEventListener('click', () => {
  addLiElement();
});

(addLiElement = () => {
    const li = document.createElement('li');
    li.textContent = `element ${++counter}`;
    const button = document.createElement('button');
    button.textContent = 'Usun';
    button.dataset.action = 'delete';
    li.appendChild(button)
    list.appendChild(li)
}).call(this)

list.addEventListener('click', e => {
    if (e.target.dataset.action == 'delete') {
        e.target.parentNode.remove();
        if (list.childElementCount == 0)  {
          counter = 0;
        } 
    }
});

 

komentarz 11 października 2020 przez niezalogowany

Kreatywnie ale nie możemy zmienić HTML ! Bardzo przepraszam za mój błąd i złe oznaczenie kodu Html w pytaniu ! Pierwszy fragment kodu to HTML, nie jak napisałem javascript! Dziekuję serdecznie z Pomoc i życzę miłego dnia wink

komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Twój pierwszy button Usuń nie ma dodanego Listener-a

@VBService, to nie ma znaczenia, ponieważ listener jest podpięty na liście (której przycisk Usuń jest potomkiem), a zdarzenia bąbelkują, więc kliknięcie w przycisk powoduje wywołanie listenera na liście.

1
komentarz 11 października 2020 przez VBService Ekspert (251,210 p.)

@ScriptyChris, Przyznaję Tobie rację, rzeczywiście przeoczyłem fakt propagowania zdarzenia i błąd w zapisie kodu,

<button data-delete>

na 

<button data-action="delete">

co i tak nie zmienia faktu, że przedstawiony prze zemnie kod wyeliminował Moje niedopatrzenie (propagacja zdarzenia) i błąd autora książki (treść komentarzy pod najlepszą odpowiedzią - powyżej). wink

2
komentarz 11 października 2020 przez niezalogowany

Proszę Pamiętać że sukces zawsze ma wielu Ojców !

cheeky

Podobne pytania

0 głosów
1 odpowiedź 1,204 wizyt
pytanie zadane 30 lipca 2018 w Systemy operacyjne, programy przez Nimplex Początkujący (460 p.)
0 głosów
1 odpowiedź 309 wizyt
pytanie zadane 27 lipca 2017 w JavaScript przez SzymonSmith Użytkownik (870 p.)
+2 głosów
2 odpowiedzi 175 wizyt
pytanie zadane 26 stycznia 2021 w JavaScript przez Igor Ryp Nowicjusz (140 p.)

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!

...