JavaScript - arrow function - ciklus

JavaScript - arrow function - ciklus
2021-01-21T21:50:59+01:00
2021-01-21T23:42:06+01:00
2022-10-15T21:26:34+02:00
tiptop
Kedves Programozók!

Segítséget szeretnék kérni.
Azt szeretném megoldani, hogy a gomb feliratát kiírjam a konzolra.

Egy html fájlban van két gomb, a gombokhoz tartozik egy 
class, aminek az  értéke btn. A cél, hogy arrow function és eseményfigyelő segítségével (ciklusban), a gombra kattintva kiírja a gomb szövegét a konzolra. 


<button class"btn">read </button> <button class="btn">read more</button>

document.querySelectorAll('.btn')].forEach(but =&gt; but.addEventListener('click', () =&gt; { console.log(this."value:",value) }))
Mutasd a teljes hozzászólást!
Hali!

Arra is lehetne megoldás, hogy value nélkül is megkapjam a gomb feliratát?

Persze: pl. a textContet-et veszed, ha nincs value(-érték):
document.querySelectorAll('.btn').forEach(but => but.addEventListener('click', event => console.log(event.target.value || event.target.textContent) ) );
Mutasd a teljes hozzászólást!

  • Hali!

    A cél, hogy arrow function és eseményfigyelő segítségével (ciklusban), a gombra kattintva kiírja a gomb szövegét a konzolra.

    Miért cél arrow function használatával megoldani ezt? Ha kicsit utánanézel az arrow function-nek, akkor rájössz, hogy miért lehet problémás ez (főleg a this eltérő tulajdonsága/kezelése miatt a normál függvényekkel összehasonlítva).

    Persze, kicsit „hekkelve” akár meg is oldható: az eseménykezelőnek add át paraméterként ez eseményt (automatikusan átadódik), így annak target tulajdonságán keresztül már eléred az elemet (gombot):
    document.querySelectorAll('.btn').forEach(but => but.addEventListener('click', event => console.log(event.target.value) ) );
    Persze, a kérdésem továbbra is áll.

    Mutasd a teljes hozzászólást!
  • Köszönöm szépen!
    Nagyon sokat segítettél.

    Miért cél arrow function használatával megoldani ezt?

    Egyedül tanulok! Videotanár - ingyenes - tananyag segíti a tanulást (YouTube), de
    mentori segítség nélkül. Végig néztem a függvényekre vonatkozó részt.
    Gyakorlati példákat nem kaptam: a videóban láttam, hogy az  arrow function egy új (2015)
    lehetőség a rövidebb kódírásra. Szükségem volt egy gyakorlati példára amivel könnyeben 
    megértem a JavaScript működését.

    document.querySelectorAll('.btn').forEach(but => but.addEventListener('click', event => console.log(event.target.value) ) );
     
    A megoldás nagyon jó! Akkor működik, amikor a gombnak van value="read" értéke, ....
    A value="read" érték nélkül nem írja ki a konzolra a gomb feliratát. Arra is lehetne megoldás, hogy 
    value nélkül is megkapjam a gomb feliratát?

    <button class="btn">read </button>
    Mutasd a teljes hozzászólást!
  • Hali!

    Arra is lehetne megoldás, hogy value nélkül is megkapjam a gomb feliratát?

    Persze: pl. a textContet-et veszed, ha nincs value(-érték):
    document.querySelectorAll('.btn').forEach(but => but.addEventListener('click', event => console.log(event.target.value || event.target.textContent) ) );
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd