EventListener -Audio

pytanie zadane 4 kwietnia 2018 w JavaScript przez murdercrit Nowicjusz (120 p.)

Witam, pisze sobie taka smieszna apke aby pocwiczyc troche.

https://codepen.io/Stosio/pen/qoMEOV

Udalo mi sie wywolac dzwieki przez klikniecie na klawiaturze. Klikajac w klawisze od A-L wywoluje poszczegolne dzwieki. Chcialem jeszcze zrobic, zeby bylo tak samo poprzez klikniecie, lecz niestety zgubilem sie i nie mam pomysłów. Jedyne co udalo mi sie narazie zrobic to wywoływanie wszystkich, losowych dzwiekow poprzez klikniecie. Naprowadzi mnie ktos aby funkcja playSound dzialala w taki sposob zeby wlaczaly sie tam takie same dzwieki jak poprzez klikniecie A-L

1 odpowiedź

odpowiedź 4 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Zdarzenie onClick, nasłuchiwanie zdarzeń (addEventListener).

komentarz 4 kwietnia 2018 przez murdercrit Nowicjusz (120 p.)

Z tego co wiem to onClick juz sie nie uzywa i jest to bledne rzowiazanie.

komentarz 4 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Jeśli używasz go w HTML to faktycznie jest to złe rozwiązanie. Jeśli zaś używasz go w addEventListener, to zdarzenie onClick jest jak najbardziej prawidłowe.

komentarz 4 kwietnia 2018 przez murdercrit Nowicjusz (120 p.)

Jak sie uzywa onClick w addeventlistener :P sprawdz codepen

komentarz 4 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Wywołujesz funkcję? Bo nie widzę nawiasów.

komentarz 4 kwietnia 2018 przez murdercrit Nowicjusz (120 p.)

Tak wywołuje funkcje i po kliknieciu na przycisk, wystepuja dzwieki tylko niestety wiele a nie jeden. Nie mam pojecia jak powiedziec przegladarce zeby wiedziala ze akurat po kliknieciu tego przycisku ma wykonac dany dzwiek.

komentarz 4 kwietnia 2018 przez Mariusz08 Maniak (62,300 p.)

Do zdarzenia onClick przechwytujesz nazwę dive, i np. filtrujesz po nim.

komentarz 4 kwietnia 2018 przez murdercrit Nowicjusz (120 p.)

podasz przyklad? bo probuje probuje probuje to zrobic i nic. wiem mniej wiecej na czym to ma polegac

const keys = document.querySelector('.keys');

keys.addEventListener('click', function(){
    e.preventDefault();
  const targetElement = e.target.querySelector("span") || e.target;
  const id = targetElement.textContent;
})

Probowalem jeszcze w ten sposob