• 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
82 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,820 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,820 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ź 92 wizyt
pytanie zadane 21 września 2016 w JavaScript, jQuery, AJAX przez bugs55 Użytkownik (970 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 92 wizyt
pytanie zadane 30 kwietnia 2018 w JavaScript, jQuery, AJAX przez NieMaJuzNazw Początkujący (400 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

64,898 zapytań

111,368 odpowiedzi

234,330 komentarzy

46,744 pasjonatów

Przeglądających: 209
Pasjonatów: 11 Gości: 198

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.

...