Uproszczenie funkcji

Question

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.

Comments

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();
}

 

---

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ć

---

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.