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

Jak pobrac id dynamicznie pobranego elementu w czystym JS?

0 głosów
99 wizyt
pytanie zadane 30 grudnia 2018 w JavaScript, jQuery, AJAX przez bartello88 Użytkownik (680 p.)
Stworzyłem prosta todolist którą tworzy dynamicznie nowe elementy. Chciałbym je tez dynamicznie usuwać, ale nie ostatni(lastChild), a konkretnie kliknięty. Do tego potrzebuje pobrać ID klikniętego elementu. Umiem zrobić to w przypadku elementów już będących wcześniej na stronie, a nie tych które zostaną stworzone. Kod nie działa. Poproszę o pomoc.

2 odpowiedzi

+2 głosów
odpowiedź 30 grudnia 2018 przez sebeks Gaduła (4,860 p.)
Zakładasz na listę addEventListener('click', function(e){  },false); i to "e" podane jako argument funkcji to jest event, czyli jeśli klikniesz na na coś co ma na tej liście parametr id, to w tej funkcji możesz mieć np const zmienna = e.target.id i wtedy zmienna będzie stringiem o treści równej id tego elementu. Często używa się też e.target.value.

Najlepiej wewnątrz tej funkcji wpisz sobie console.log(e) i zobacz co zawiera ten obiekt "e", bo są tam inne fajne dane które mogą się przydać jak na przykład pozycja x,y kliknięcia na ekranie i wiele innych.
komentarz 30 grudnia 2018 przez bartello88 Użytkownik (680 p.)

function addElement(){
    var newEl = document.createElement("li");
    var tekst = "sfsdfs".toUpperCase();
    newEl.innerHTML = '<li class="elementyListy" id="elementNumber'+elementumber+'"><p>'+tekst+'</p></li>';
    var parent = document.querySelector(".lista").appendChild(newEl);
    elementumber++;
}

 

 

var el = document.querySelector(".lista");
el.addEventListener("click", function(e){
    var targett = e.target;
    console.log(targett.id);
}, false);

 

Własnie coś podobnego zrobiłem ale działa tylko na elementach już wczytanych przez stronę mimo ze w stworzonych dynamicznie sa tez id.

Efekt końcowy powyżej.

 

komentarz 30 grudnia 2018 przez sebeks Gaduła (4,860 p.)
edycja 3 stycznia przez sebeks
Dawno takiego kodu nie pisałem. Po pierwsze dane, czyli elementy z listy trzymaj w zmiennej typu tablica. Po drugie wyświetlaj elementy listy iterując po tablicy. Po trzecie dodawaj (i usuwaj) elementy listy w ten sposób, że wykonuj operację na tablicy. Po czwarte, sama zmiana w tablicy nie zmieni widoku na stronie i trzeba uruchomić funkcję wyświetlającą listę po każdej zmianie danych w tablicy (czyli po dodaniu lub usunięciu listy).

Co do kodu to poczytaj gdzieś (np. Dokumentacja MDN) lub obejrzyj na Youtube (np. Samuraj programowania) i zamiast var używaj let i const.
0 głosów
odpowiedź 30 grudnia 2018 przez Rettles Bywalec (2,320 p.)
Ciężko tu jakoś pomóc, gdybyś wrzucił kod było by łatwiej, ale w takim wypadku nakieruję - poczytaj jak działa słówko this w JavaScript.

Podobne pytania

0 głosów
1 odpowiedź 94 wizyt
pytanie zadane 21 września 2016 w JavaScript, jQuery, AJAX przez bugs55 Obywatel (1,060 p.)
0 głosów
1 odpowiedź 61 wizyt
pytanie zadane 15 lutego 2017 w JavaScript, jQuery, AJAX przez tatar Użytkownik (740 p.)
0 głosów
3 odpowiedzi 95 wizyt
pytanie zadane 30 kwietnia 2018 w JavaScript, jQuery, AJAX przez NieMaJuzNazw Początkujący (400 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

67,234 zapytań

114,194 odpowiedzi

242,038 komentarzy

45,643 pasjonatów

Przeglądających: 319
Pasjonatów: 9 Gości: 310

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...