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.

Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!