Eseménykezelés JavaScriptben - Az `onclick` használata

A weboldalakon gyakran szeretnénk valamilyen műveletet végrehajtani, amikor a felhasználó egy gombra kattint.

Például:

Egy gomb megnyomásakor jelenjen meg egy üzenet.
Egy kattintás hatására változzon meg a szöveg vagy a háttérszín.
Egy gomb segítségével növeljük vagy csökkentsük egy számláló értékét.
Kattintásra jelenjen meg vagy tűnjön el egy HTML-elem.
Egy űrlap elküldése előtt ellenőrizzük a felhasználó által megadott adatokat.

Ezeket a műveleteket JavaScript segítségével valósíthatjuk meg.

A JavaScript egyik alapvető eseménykezelési lehetősége az onclick.

Az onclick egy eseménykezelő tulajdonság, amely segítségével meghatározhatjuk, hogy milyen JavaScript-kód fusson le akkor, amikor egy HTML-elemen kattintási esemény történik.

A legegyszerűbb példa:

<button onclick="alert('Szia, világ!')">
    Kattints ide!
</button>

Ha a felhasználó rákattint a gombra, a böngésző megjelenít egy felugró ablakot a „Szia, világ!” szöveggel.

Fontos: az onclick nevében az on és a click egybeírandó. Az esemény neve a JavaScriptben click, az eseménykezelő tulajdonság neve pedig onclick.

A JavaScriptben az eseménykezelő tulajdonságok neve kisbetűs formában szerepel, tehát a helyes alak: onclick.

Az `onclick` használata JavaScript-függvénnyel

A gyakorlatban célszerű a kattintáskor végrehajtandó műveleteket külön függvénybe szervezni.

Ennek több előnye van:

Átláthatóbb lesz a HTML-kód.
A JavaScript-logika elkülönül a megjelenítéstől.
A függvény könnyebben tesztelhető és karbantartható.
Ugyanaz a függvény több helyről is meghívható.

Egyszerű függvény meghívása

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Függvény meghívása</title>
</head>
<body>

    <h1>Üzenetküldés</h1>

    <button onclick="uzenetMegjelenitese()">
        Üzenet megjelenítése
    </button>

    <script>
        function uzenetMegjelenitese() {
            alert("A függvény sikeresen lefutott!");
        }
    </script>

</body>
</html>

Ebben a példában az onclick nem tartalmazza a végrehajtandó művelet teljes kódját, hanem meghív egy függvényt.

A függvény:

function uzenetMegjelenitese() {
    alert("A függvény sikeresen lefutott!");
}

A function kulcsszóval függvényt hozunk létre.

A uzenetMegjelenitese a függvény neve.

A függvény törzsében található az az utasítás, amely megjeleníti az üzenetet.

A gomb HTML-kódja:

<button onclick="uzenetMegjelenitese()">
    Üzenet megjelenítése
</button>

Kattintáskor a böngésző meghívja az uzenetMegjelenitese() függvényt.

Adatok átadása az eseménykezelőnek

Az onclick segítségével olyan függvényeket is meghívhatunk, amelyek paramétereket várnak.

Paraméter átadása

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Paraméterek átadása</title>
</head>
<body>

    <button onclick="koszont('Anna')">
        Anna köszöntése
    </button>

    <button onclick="koszont('Péter')">
        Péter köszöntése
    </button>

    <script>
        function koszont(nev) {
            alert("Szia, " + nev + "!");
        }
    </script>

</body>
</html>

A két gomb ugyanazt a függvényt hívja meg, de eltérő paraméterrel.

Számítás végrehajtása kattintáskor

Készítsünk egy egyszerű összeadó programot!

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Összeadás kattintással</title>
</head>
<body>

    <h2>Egyszerű összeadás</h2>

    <button onclick="osszead(5, 3)">
        5 + 3 kiszámítása
    </button>

    <script>
        function osszead(a, b) {
            alert("Az eredmény: " + (a + b));
        }
    </script>

</body>
</html>

Kattintáskor a program a következő eredményt jeleníti meg:

Az eredmény: 8

A függvény két paramétert kap:

a értéke 5.
b értéke 3.

Az a + b kifejezés összeadja a két számot.

A zárójelek az alábbi kódrészletben fontosak:

alert("Az eredmény: " + (a + b));

A (a + b) először elvégzi az összeadást, majd az eredményt szöveggé alakítva hozzáfűzi az üzenethez.

Az `onclick` használata a DOM segítségével

Az eddigi példákban az onclick attribútumot közvetlenül a HTML-kódban adtuk meg.

A modern JavaScript-programozásban gyakran inkább JavaScriptből rendeljük hozzá az eseménykezelőt a HTML-elemhez.

Ehhez meg kell keresnünk a megfelelő elemet a DOM-ban.

<title>Kattintásszámláló</title>

<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: 50px;
    }

    #szamlalo {
        font-size: 32px;
        color: darkblue;
    }

    button {
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
    }
</style>

<h1>Kattintásszámláló</h1>

<p>A gomb megnyomásainak száma:</p>

<p id="szamlalo">0</p>

<button onclick="novel()">Növelés</button>

<script>
    let ertek = 0;

    function novel() {
        ertek++;

        document.getElementById("szamlalo").textContent = ertek;
    }
</script>

A DOM (Document Object Model) a HTML-dokumentum objektummodellje, amely lehetővé teszi, hogy JavaScriptből elérjük és módosítsuk az oldal elemeit.

Eseménykezelő hozzárendelése az `onclick` tulajdonsággal

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>DOM és onclick</title>
</head>
<body>

    <h2 id="cim">Eredeti címsor</h2>

    <button id="gomb">Címsor módosítása</button>

    <script>
        const gomb = document.getElementById("gomb");
        const cim = document.getElementById("cim");

        gomb.onclick = function () {
            cim.textContent = "A címsor megváltozott!";
        };
    </script>

</body>
</html>

Ebben a példában a JavaScript megkeresi a gombot és a címsort.

const gomb = document.getElementById("gomb");
const cim = document.getElementById("cim");

A két változó a megfelelő HTML-elemekre hivatkozik.

Ezután:

gomb.onclick = function () {
    cim.textContent = "A címsor megváltozott!";
};

A gomb onclick tulajdonságának egy függvényt adunk értékül.

A függvény nem azonnal fut le, hanem akkor, amikor a felhasználó a gombra kattint.

Miért nem fut le az eseménykezelő azonnal?

Nézzük meg a következő kódot:

gomb.onclick = function () {
    alert("A gombra kattintottál!");
};

A JavaScript itt létrehoz egy függvényt, majd hozzárendeli a gombhoz.

A függvény csak akkor hajtódik végre, ha bekövetkezik a kattintási esemény.

Ez az eseményvezérelt programozás egyik alapelve: a program bizonyos műveleteket események bekövetkezésekor hajt végre.

1. Gyakorlati példa: számláló készítése

A következő feladatban egy olyan weboldalt készítünk, amely egy számlálót jelenít meg. A felhasználó egy gomb segítségével növelheti az értéket.

A program teljes kódja

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kattintásszámláló</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        #szamlalo {
            font-size: 32px;
            color: darkblue;
        }

        button {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Kattintásszámláló</h1>

    <p>A gomb megnyomásainak száma:</p>

    <p id="szamlalo">0</p>

    <button onclick="novel()">Növelés</button>

    <script>
        let ertek = 0;

        function novel() {
            ertek++;

            document.getElementById("szamlalo").textContent = ertek;
        }
    </script>

</body>
</html>

A program működésének magyarázata

1. A számláló kezdeti értéke

let ertek = 0;

Létrehozunk egy ertek nevű változót, amely kezdetben nulla.

Azért használjuk a let kulcsszót, mert a változó értéke később módosulni fog.

2. Az eseménykezelő meghívja a függvényt

<button onclick="novel()">Növelés</button>

A gomb minden kattintáskor meghívja a novel() függvényt.

3. A számláló növelése

ertek++;

Az ertek++ utasítás eggyel növeli a változó értékét.

4. A megjelenített érték frissítése

document.getElementById("szamlalo").textContent = ertek;

A JavaScript megkeresi a szamlalo azonosítójú elemet, majd az aktuális számlálóértéket írja a tartalmába.

Miért szükséges a DOM módosítása?

A JavaScript-változó értékének megváltoztatása önmagában nem módosítja a weboldalon látható szöveget.

Ezért a változó növelése után a megjelenített értéket is frissítenünk kell.

A programban tehát két külön művelet történik:

A számláló értékének módosítása.
A módosított érték megjelenítése a weboldalon.

2. Gyakorlati példa: háttérszín módosítása kattintásra

Az onclick nemcsak szövegek módosítására, hanem a weboldal megjelenésének megváltoztatására is alkalmas.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Háttérszín módosítása</title>
</head>
<body>

    <h1>Háttérszín-váltó</h1>

    <button onclick="szinValtas()">
        Háttérszín módosítása
    </button>

    <script>
        function szinValtas() {
            document.body.style.backgroundColor = "lightblue";
        }
    </script>

</body>
</html>

Kattintáskor a weboldal háttere világoskék színű lesz.

Gyakorlófeladatok

1. feladat – Üdvözlő üzenet

Készíts egy HTML-oldalt, amelyen egy „Kattints ide!” feliratú gomb található!

A gomb megnyomásakor jelenjen meg a következő üzenet:

Üdvözöllek a webprogramozás órán!

Követelmények:

Használd az onclick attribútumot!
Az üzenetet az alert() függvény jelenítse meg!

2. feladat – Szöveg módosítása

Hozz létre egy címsort és egy gombot!

A címsor kezdeti szövege:

Ez az eredeti szöveg.

A gomb megnyomásakor változzon meg a címsor tartalma erre:

A szöveg sikeresen megváltozott!

Követelmények:

A címsor rendelkezzen egyedi id attribútummal!
A JavaScript a document.getElementById() segítségével keresse meg a címsort!
A módosításhoz használd a textContent tulajdonságot!

3. feladat – Növekvő számláló

Készíts egy kattintásszámlálót!

A weboldal kezdetben a nulla értéket jelenítse meg. Minden gombnyomáskor növekedjen eggyel a számláló értéke.

Követelmények:

Hozz létre egy ertek nevű változót!
A változó kezdeti értéke legyen nulla!
Készíts egy novel() nevű függvényt!
A függvény növelje eggyel a változó értékét!
A változás jelenjen meg a weboldalon!

4. feladat – Növelés és csökkentés

Bővítsd a számlálót két gombbal!

Az első gomb növelje a számláló értékét eggyel.
A második gomb csökkentse a számláló értékét eggyel.

Kiegészítő feltétel: a számláló értéke ne csökkenhessen nulla alá!

5. feladat – Háttérszín-váltó

Készíts egy weboldalt, amelynek háttere kezdetben fehér.

Egy gomb megnyomásakor a háttér váljon világoskékké, a következő kattintáskor pedig térjen vissza fehérre.

Követelmények:

Használj logikai változót az aktuális állapot tárolására!
A háttérszínt JavaScriptből módosítsd!
A megoldásban szerepeljen egy if-else elágazás!

6. feladat – Két szám összeadása

Készíts egy egyszerű összeadó programot, amelyben két beviteli mezőben lehet megadni a számokat.

A „Számítás” gomb megnyomásakor jelenjen meg a két szám összege.

Követelmények:

Készíts két <input> elemet!
Adj mindkét mezőnek egyedi azonosítót!
A beviteli mezők értékét JavaScriptből olvasd ki!
Az értékeket alakítsd számmá, mielőtt összeadod őket!
Az eredményt egy HTML-elemben jelenítsd meg!

Eseménykezelés JavaScriptben - Az onclick használata

Az onclick használata JavaScript-függvénnyel

Egyszerű függvény meghívása

Adatok átadása az eseménykezelőnek

Paraméter átadása

Számítás végrehajtása kattintáskor

Az onclick használata a DOM segítségével

Eseménykezelő hozzárendelése az onclick tulajdonsággal

Miért nem fut le az eseménykezelő azonnal?

1. Gyakorlati példa: számláló készítése

A program teljes kódja

A program működésének magyarázata

Miért szükséges a DOM módosítása?

2. Gyakorlati példa: háttérszín módosítása kattintásra

Gyakorlófeladatok

1. feladat – Üdvözlő üzenet

2. feladat – Szöveg módosítása

3. feladat – Növekvő számláló

4. feladat – Növelés és csökkentés

5. feladat – Háttérszín-váltó

6. feladat – Két szám összeadása

Eseménykezelés JavaScriptben - Az `onclick` használata

Az `onclick` használata JavaScript-függvénnyel

Az `onclick` használata a DOM segítségével

Eseménykezelő hozzárendelése az `onclick` tulajdonsággal