IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Jak vložit proměnou do funkce EventListener?

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Dominik Vokůrka
Člen
Avatar
Dominik Vokůrka:14.9.2022 11:33

Zdravím, mám funkci která se vyvolá kliknutím a potřeboval bych v ní použít proměnou, kterou mám deklarovanou mimo zmíněnou funkci.

Zkusil jsem: Zkoušel jsem následující kód, ale proměná example je ve funkci null.

var example = 5;
document.getElementById("ID" + example).addEventListener("click", function() {
  document.querySelector(".popup").style.display = "flex";
  document.querySelector(".class" + example).style.display = "flex"
})

Chci docílit: Mám hodně obrázků a každý má po kliknutí zobrazit něco jiného. Dělám to cyklem, proto to co se má zobrazit má vždy classu: class1, class2, ... Budu vděčný za každou radu.

 
Odpovědět
14.9.2022 11:33
Avatar
Jurajs
Člen
Avatar
Odpovídá na Dominik Vokůrka
Jurajs:14.9.2022 17:56

Ahoj, do document.getE­lementById("ID")­.addEventListe­ner("click", function() {
píšeš jen identifikátor, nic víc ;)

HTML

<div id="ID">Click ME</div>
//Tento kód mi vypisuje proměnnou example, jestli si chtěla tohle, tak si to uprav podle sebe,
// jak to potřebuješ

var example = 5;
document.getElementById("ID").addEventListener("click", function() {
  //document.querySelector(".popup").style.display = "flex";
  //document.querySelector(".class" + this.example).style.display = "flex"
  document.write(example);
})
Editováno 14.9.2022 17:57
 
Nahoru Odpovědět
14.9.2022 17:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:21.9.2022 8:13

Mozna by to chtelo napsat jednoduchy priklad a popsat, c by to melo delat a co jsi zjistil, ze to dela. Takto se uplne neda bez html kodu rici, jestli mas kod spatne nebo ne nebo hledat chybu. Ja, kdyz k tomu napisi html kod, tak tvuj kod bude fungovat. Jenze, to se nicemu nedobereme.

Obvykle bych to resil takto:

<img src="123" onclick="aaa(this)">
<script>function aaa(img) {alert(image.src);}</script> mozna by ti stacilo ziskat src a z nej bys dokazal identifikovat cislo

<img src="123" onclick="aaa(this)" class="1">
<script>function aaa(img) {alert(image.className);}</script>

<img src="123" onclick="aaa(this)" alt="1">
<script>function aaa(img) {alert(image.alt);}</script>

<img src="123" alt="1" class="group1">
<script>
document.querySelector(".group1").addEventListener("click", function() {
    alert(this.alt);
});</script>

Jo, a nastavoval bych className nebo add/remove class misto prime zmeny css vlastnosti

Editováno 21.9.2022 8:16
 
Nahoru Odpovědět
21.9.2022 8:13
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.