Trochę nie rozumiem jak za pomocą skryptu mam wywołać funkcję.
W html'u dodaj do przycisku id, potem w skrypcie, po deklaracji funkcji wklejasz to co napisał @Desu, z tym, że po cukier dodajesz (), czyli będzie całość wyglądać tak
document.getElementById("twoje-id").onclick = cukier();
Możesz też użyć <a href=https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener">addEventListener</a>, niby bardziej elegancki.
Możesz też zdarzenia podpinać do tagów document.getElementsByTagName("tag")
, klasdocument.getElementsByClassName("klasa");
, użyć querySelector(document.querySelector("selektor"); do którego możesz przekazać nazwę tagu, id bądź klasę używając selektorów CSS ("div > a" jak najbardziej możliwe) lub querySelectorAll document.querySelectorAll("selektor"); </code>. querySelector pobierze pierwszy element, który spełnia dany warunek, czyli <code> document.querySelector(".jakis_div")
zwróci pierwszy element z klasą ".jakis_div". Pozostałe elementy zwrócą obiekt NodeList zawierający wszystkie pobrane elementy. Aby podpiąć zdarzenie do elementów w NodeList musisz je dodatkowo "wybrać", albo poprzez wskazanie określonego elementu, np.
var foo = document.querySelectorAll(".jakis_element");
foo[0].style.display = "none";
co spowoduje ukrycie pierwszego elementu. Zamiast tego możesz też wybierać elementy w pętli for, np.
var foo = document.querySelectorAll(".jakis_element");
for (var i = 0; i < foo.length; i++) {
foo[i].style.display = "none";
}
Dzięki czemu ukryjesz wszystkie elementy z klasą ".jakis_element".
Po więcej szczegółów musisz zajrzeć do dokumentacji.
To tak na zapas, bo pewnie niedługo do tego dotrzesz ;)
P.S. Tak odnośnie onclick (i kilku innych dobrych praktyk, jak np. niemieszanie HTML'u z JS'em) - Angular z tego korzysta i jakoś niespecjalnie widzę krytykę i oburzenie na takie podejście ;)