JavaScript onclick esemény (JavaScript függvény meghívása kattintáskor, gomb megnyomásakor)
Ebben a leckében egy JavaScript függvény meghívásának egy speciális esetét mutatjuk be, az onclick-et, azaz azt amikor egy HTML elem, általában gomb megnyomásának a hatására hívódik meg a JS függvény.
>> Általánosságban itt olvashatsz a JavaScript függvényekről. <<
Mi az az onclick?
Az onclick egy olyan esemény, amely csak akkor következik be, amikor a felhasználó rákattintott egy elemre. Nekünk nem kell foglalkoznunk azzal, hogy detektáljuk vagy elkapjuk a kattintást, az onclick megteszi nekünk ezt a szívességet.
Háromféleképpen használhatjuk az onclick eseményt:
- HTML nyelvben
- JavaScript nyelvben
- JavaScript nyelvben addEventListener() metódus segítségével
onclick szintaxis HTML nyelvben
<ELEM onclick="FÜGGVÉNYNÉV()">
Code language: HTML, XML (xml)Konkrétan annyi a dolgunk, hogy rá kell tennünk egy onclick attribútumot arra az elemre, amelyen szeretnénk, hogy érzékelje a kattintást. Ez az elem tulajdonképpen bármilyen HTML elem lehet, amely látható. Akár egy sima p elem is, de általában gombokra szokás elhelyezni.
onclick példa HTML nyelvben
Alábbi példánkban is egy gombra fogunk onclick eseményt elhelyezni.
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<body>
5 és 3 összege: <p id="szoveg"></p>
<button onclick="osszead(5,3)">Összeadás</button>
<script>
function osszead(szam1, szam2) {
document.getElementById("szoveg").innerHTML = szam1 + szam2;
}
</script>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
5 és 3 összege:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fenti példában van egy „osszead()” nevű függvény, amelynek megadtuk az 5 és 3 számokat, amelyeket a gombnyomásra fog összeadni. A gomb megnyomásakor az onclick hatására meghívódik a függvény.
onclick szintaxis JavaScript nyelvben
ELEM.onclick = function(){FÜGGVÉNYNÉV};
Code language: JavaScript (javascript)Valamilyen módon le kell kérnünk a JavaScript segítségével a kattinthatóvá tenni kívánt elemet, majd meg kell adnunk egy pont után az onclick kulcsszót. Például az ebben a cikkben részletezett módszerrel. Ezek után megmondjuk a programnak, hogy egy függvény következik és kapcsoszárójelek között megadjuk a függvényünk nevét, illetve esetleges bemenő paramétereit.
onclick példa JavaScript nyelvben
Alábbi példánkban is egy gombra fogunk onclick eseményt elhelyezni.
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<body>
5 és 3 összege: <p id="szoveg"></p>
<button id="gomb">Összeadás</button>
<script>
document.getElementById("gomb").onclick = function(){osszead(5,3)};
function osszead(szam1, szam2) {
document.getElementById("szoveg").innerHTML = szam1 + szam2;
}
</script>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
5 és 3 összege:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ennél a megoldásnál egy JavaScript kóddal kértük le a kattinthatóvá tenni kívánt elem ID-jét, majd az onclick tulajdonsággal megadtuk, hogy melyik függvényt hívja meg a kattintáskor.
onclick szintaxis JavaScript nyelvben addEventListener() metódus segítségével
ELEM.addEventListener("click", function(){FÜGGVÉNYNÉV});
Code language: JavaScript (javascript)Az addEventListener metódus egy eseménykezelőt csatol a megadott elemhez, mely jelent esetben a kattintást figyeli. A második paraméterében pedig megkapja a futtatni kívánt függvényt.
onclick példa JavaScript nyelvben addEventListener() metódus segítségével
Alábbi példánkban is egy gombra fogunk onclick eseményt elhelyezni.
JavaScript + HTML kód
<!DOCTYPE html>
<html>
<body>
5 és 3 összege: <p id="szoveg"></p>
<button id="gomb">Összead</button>
<script>
document.getElementById("gomb").addEventListener("click", function (){osszead(5,3)});
function osszead(szam1, szam2) {
document.getElementById("szoveg").innerHTML = szam1 + szam2;
}
</script>
</body>
</html>
Code language: HTML, XML (xml)Eredmény
5 és 3 összege:
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ennél a megoldásnál egy JavaScript kóddal kértük le a kattinthatóvá tenni kívánt elem ID-jét, majd az onclick tulajdonsággal megadtuk, hogy melyik függvényt hívja meg a kattintáskor.
