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

Uproszczenie funkcji

Object Storage Arubacloud
0 głosów
237 wizyt
pytanie zadane 26 października 2017 w JavaScript przez jking Początkujący (350 p.)

Witam serdecznie, jest to mój pierwszy post. Po nauce HTML oraz CSS zacząłem programować w JS'ie. 

Oglądając film Pana Mirosława na temat tworzenia gry w wisielca, postanowiłem go troszkę rozbudować, dodałem kategorie, losowanie haseł itp. Wszystko działa lecz nie podoba mi się zbytnio ten fragment:

 

var haslo = [ ['Kategoria 1', 'HASŁO PIERWSZE', 'HASŁO DRUGIE'], 
	             ['Kategoria 2', 'HASŁO PIERWSZE', 'HASŁO DRUGIE'] ];

function poczatek(){
	
	var kategoria = "<div class='kategoria' onclick='kategoria1()'>" +haslo[0][0]+ "</div>" + "<div class='kategoria' onclick='kategoria2()'>" +haslo[1][0]+ "</div>";
	
	document.getElementById("poczatek").innerHTML = "Witaj w wisielcu!<br><br> Wybierz kategorię<br> " + kategoria;
}

function kategoria1(){
	losowe_haslo = haslo[0][Math.floor(haslo.length * Math.random() +1)];
	dlugosc = losowe_haslo.length;
	start();
}

function kategoria2(){
	losowe_haslo = haslo[1][Math.floor(haslo.length * Math.random() +1)];
	dlugosc = losowe_haslo.length;
	start();
}

Jak można zapisać to w jednej funkcji za pomocą jednego onclicka? Nie chciałbym tworzyć 50 funkcji przy załóżmy 50 kategoriach. 

Z góry dziękuję za pomoc.

komentarz 26 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Na przykład zastosować Event Delegation z przekazaniem jako parametru indeksu klikniętego diva/przycisku do funkcji (wtedy możesz ją nazwać po prostu kategoria), gdzie podstawisz go do tablicy haslo zamiast wartości 0:

function kategoria( index ){
    losowe_haslo = haslo[ index ][Math.floor(haslo.length * Math.random() +1)];
    dlugosc = losowe_haslo.length;
    start();
}

 

komentarz 27 października 2017 przez jking Początkujący (350 p.)
okej, poczytałem trochę na temat Event Delegation, rozumiem jak zastosować to na przykładzie elementów zawartych w HTML, jednak nadal nie potrafię wykonać tego jeżeli mam tablicę wielowymiarową z wartościami w JS, na których chcę właśnie operować
komentarz 27 października 2017 przez ScriptyChris Mędrzec (190,190 p.)

Jeśli dobrze widzę, to element o id "poczatek" jest parentem dla zbioru, gdzie podpinasz onclicki. Podłącz zatem na nim listener, a wtedy kliknięcie na któregokolwiek jego potomka - o ile nie będzie po drodze zatrzymanej propagacji - uruchomi funkcję, do której zostanie przekazany obiekt zdarzenia.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 263 wizyt
0 głosów
1 odpowiedź 191 wizyt
0 głosów
2 odpowiedzi 199 wizyt
pytanie zadane 1 czerwca 2020 w JavaScript przez michal3254 Nowicjusz (140 p.)

92,658 zapytań

141,552 odpowiedzi

319,991 komentarzy

62,027 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...