Przeniesienie wartości przez funkcję

Question

Hej. Tak wygląda mój kod HTML:

  <img src="obrazek_dom.png"  id="o1"   alt="keyo1"  onclick="pressed();"/>
  <img src="obrazek_dach.png" id="o2"  alt="keyo2" onclick="pressed();"/>
  <img src="obrazek_okno.png" id="o3"  alt="keyo3" onclick="pressed();"/>

Potrzebuję jakiegoś sposobu, aby przenieść wartość liczbową do funkcji. Na przykład po wciśnięciu na obrazek_dom.png do funkcji idzie liczba 1, po wciśnięciu obrazek_dach.png do funkcji idzie liczba 2 itd.

Wpisanie w nawiasy, pressed(), danej liczby nie działa. Stworzenie zmiennej przed utworzeniem obrazków i wstawienie go jako argument funkcji również nie działa. Jakieś pomysły? 

 

Answer 1

<img src="obrazek_dom.png"  id="o1"   alt="keyo1"  onclick="pressed();"/>

Chcesz przekazać do funkcji pressed() liczbę, najlepiej taką która oznacza numer obrazka? Dlaczego 

Wpisanie w nawiasy, pressed(), danej liczby nie działa

nie działa? Pokaż kod JavaScript. Może zapominasz o argumencie w deklaracji funkcji?

---

Możesz to zrobić na parę sposobów, zaczynając od onclick wybrałeś jeden z gorszych :) 

Spróbuj w ten sposób:

<img src="obrazek_dach.png" id="o2"  alt="keyo2">

document.querySelector( 'img' ).addEventListener( 'click', function() {
     var pictureNumber = this.id.slice( 1 );
     alert( 'Obrazek numer: ' + pictureNumber );
} );

Z racji tego, że masz kilka obrazków, żeby nie doczepiać do każdego z nich EventListenera, zastosuj EventDelegation - owiń wszystkie obrazki np. elementem <div>, na niego ustaw EventListener i wtedy pozyskuj sobie numer obrazka za pomocą event.target.id.

Comments

Wielkie dzięki. Właśnie skróciłeś mój kod z 1500 linijek do 100 xD

---

Masz 1500 obrazków na stronie? :)

---

A co to za jakieś kombinacje z id stosujesz? Skoro nie korzystasz z id do identyfikacji elementu to możesz go w ogóle nie uzywać i zamiast tego uzyć pola, które z założenia służy do przechowywania danych: `data-` (np `data-id`) - nie musisz wtedy kombinować z jakimiś prefiksami by zapewnić unikalność.

---

Racja, można tutaj skorzystać z atrybutu data-*. Jednak autor korzystał z id, więc nie chciałem mieszać.

---

@Krzychu92 Nie mam 1500 obrazków na stronie. To tylko urywek kodu, który z rozwiązaniem od ciebie, zmienił całą resztę skryptu(ctrl+c, ctrl+v) na uniwersalny kod w jednym miejscu. 

@kap Dzięki.Korzystałem z id bo nie znałem nic innego.