e.target.id, jak inaczej?

Question

Hej, dotychczas aby nie spamować id lub funkcjami to wpisywałem kilka id dla jakiś elementów a później za pomocą document.add..('click....) if... e.target === id .... wywoływałem funkcję, ale przez to naruszyłem zasadę (id ma być unikalne).

No i teraz mam problem, bo nie chce tego naruszać a zrobić to profesjonalnie i nie wiem w jaki sposób to zrobić aby nie spamować funkcja1,2,3 itd. lub pętla. Również słyszałem, że do documentu powinno się rzadko podłączać.

Ma ktoś pomysł, za pomoc dzięki!

Comments

Nie bardzo rozumiem co dokładnie zrobiłeś i co chcesz zrobić :)

Jeśli masz jakiś element unikalny w DOM to nie ma problemu, można mu nadać ID. Powielanie ID nie ma sensu. W takim wypadku lepiej zastosować atrybut np. data- albo klasę CSS i pobierać referencje po klasach, atrybutach itp.

Nie wiem co rozumiesz przez rzadkie podłączenie się do dokumentu?

---

Teraz aby nie powielać id zrobiłem tak 

                <img id="avatar1" src="img/app/avatar/croupier.png" alt="avatar">
                <img id="avatar2" src="img/app/avatar/doctorMen.png" alt="avatar">
                <img id="avatar3" src="img/app/avatar/doctorWomen.png" alt="avatar">

document.addEventListener('click', function(e) {
    if(e.target.id === 'avatar1' || e.target.id === 'avatar2' || e.target.id === 'avatar3') {
        changeAvatar();
    }  
});

Wydaje mi się to beznadzieje i spamowac id zamiast dac jedno i w e.target.id dać ten sam id wszędzie i by tak samo działało 

---

właśnie chyba dlatego Tomek wspomniał o atrybucie data-

Tzn mógłbyś np do tych trzech elementów dodać coś w stylu:

<img src="img/app/avatar/croupier.png" alt="avatar" data-avatar>
<img src="img/app/avatar/doctorMen.png" alt="avatar" data-avatar>
<img src="img/app/avatar/doctorWomen.png" alt="avatar" data-avatar>

I w JS sprawdzać czy kliknięty element posiada taki atrybut 

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

---

a dlaczego w ogóle upierasz się aby nasluchiwac click dla document, a nie dla konkretnych elementow lub kolekcji elementów DOM?

Answer 1

Jeśli masz wiele id to może zamiast if użyj switch(e.target.id)