• 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!

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
267 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 (255,840 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,490 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,490 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 (255,840 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 (255,840 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,260 wizyt
pytanie zadane 30 lipca 2018 w Systemy operacyjne, programy przez Nimplex Początkujący (460 p.)
0 głosów
1 odpowiedź 445 wizyt
pytanie zadane 27 lipca 2017 w JavaScript przez SzymonSmith Użytkownik (870 p.)
+2 głosów
2 odpowiedzi 211 wizyt
pytanie zadane 26 stycznia 2021 w JavaScript przez Igor Ryp Nowicjusz (140 p.)

93,103 zapytań

142,077 odpowiedzi

321,576 komentarzy

62,445 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...