Дугмад¶
Догађаји се дешавају на неким HTML елементима и на њима се постављају JavaScript функције које реагују на те догађаје и врше акције. У примерима у претходној секцији смо директно постављали функције на елементе на којима ће се дешавати догађаји. У правим веб-странама чест је случај да треба поставити дугме на које ће неко да кликне да би покренуо акцију.
<button type="button">Кликни на ово дугме</button>
Као и у случају претходних елемената, на ово дугме се може поставити функција која треба да буде извршена када неко кликне на дугме:
<button type="button" id="dugme1">Кликни на ово дугме</button>
...
<script>
document.getElementById("dugme1").addEventListener('click', function(dogadjaj) {
// telo anonimne funkcije
});
</script>
Као и код других догађаја и других HTML елемената, и овде је могуће као други аргумент поставити само име функције, или уметнути анонимну функцију, као што је овде учињено.
Функција (било анонимна или именована) и даље има приступ свим информацијама о догађају, а тиме и о HTML елементу на којем се десио догађај. Међутим, у случају дугмади се такве информације знатно ређе користе.
Пример – Вишејезична страна¶
На следећој веб-страни се у засебним одељцима налази исти садржај на ћирилици, латиници и на енглеском. Садржај је, у ствари, само започет, али јасно је да се он лако може допунити. Сваки одељак има одговарајући идентификатор (cirilica, latinica, или english).
У врху стране су три дугмета, помоћу којих бирамо на ком језику/писму ће бити приказана страна. Сва три дугмета покрећу исту функцију, али са различитим аргументом. Свако дугме као аргумент прослеђује идентификатор оне секције која треба да буде видљива. Функција најпре све одељке учини невидљивим, тако што им дода класу nevidljiv (стил те класе је display: none, што значи да се елементи те класе не приказују), а затим ту класу уклони из одељка који треба да остане видљив.