Jak přidat class elementu na který se kliklo v JS

Ahoj,
jak můžu přidat v tomto seznamu nějakou class položce na kterou se kliklo? Jde to když nemají položky své ID?
Našel jsem jak přidat potřebnou class, ale ID položka nemá.
Díky.


document.getElementById(id).onclick = function(){
document.getElementById(id).classList.add("clicked")
};

<ul>
<li>Jedna</li>
<li>Dvě</li>
<li>Tři</li>
<li>Čtyři</li>
<li>Pět</li>
</ul>

Předmět	Autor	Datum
document.querySelectorAll("li").forEach((li) => { li.addEventListener("click", (ev) => { ev.srcEleme… Wikan 09.02.2023 21:53	Wikan	09.02.2023 21:53
Děkuji, funguje akorát jsem si neuvědomil že se nerefreshuje stránka a tak se to nastaví všem na kte… Marek9 09.02.2023 22:41	Marek9	09.02.2023 22:41
Zkusil bych něco jako: document.querySelectorAll("li") .classList.remove( 'class' ) ; Flash_Gordon 09.02.2023 23:02	Flash_Gordon	09.02.2023 23:02
V podstatě je to potřeba udělat tak, jak jsi napsal. Případně takhle: document.querySelectorAll("li… Wikan 10.02.2023 08:06	Wikan	10.02.2023 08:06
teda celý kód: document.querySelectorAll("li").forEach((li) => { li.addEventListener("click", (ev)… Ale 10.02.2023 17:32	Ale	10.02.2023 17:32
@Wikan: Děkuji. Umí Vanila JS procházet na localhostu adresáře ve kterých sama běží? Marek9 10.02.2023 18:37	Marek9	10.02.2023 18:37
Čemu říkáš procházet adresáře? Wikan 10.02.2023 23:15	Wikan	10.02.2023 23:15
Jestli dokáže vrátit názvy souborů a adresářů nejlépe rekurzivně. Marek9 11.02.2023 12:47	Marek9	11.02.2023 12:47
Pokud myslíš v browseru, tak rozhodně ne. To by byla bezpečnostní díra jako prase. Ale např. v NodeJ… Wikan 11.02.2023 13:04	Wikan	11.02.2023 13:04
Ano, v nodejs to jde. A nejde to i když ten JS poběží jen na localhostu? Díky. Marek9 11.02.2023 18:02	Marek9	11.02.2023 18:02
Ne. Wikan 11.02.2023 18:32	Wikan	11.02.2023 18:32
Díky za informace, to je důvod proč jsem nic nenašel :( Když bych chtěl po kliknutí na element LI v… Marek9 11.02.2023 21:09	Marek9	11.02.2023 21:09
Ten cyklus tam byl z dobrého důvodu. To se pak nediv, že to bez něj nefunguje. Wikan 11.02.2023 21:16	Wikan	11.02.2023 21:16
OK díky, myslel jsem, že to jde bez cyklu. Prosím tě, když v JS vytvářím elementy tak to chvíli trvá… Marek9 11.02.2023 21:46	Marek9	11.02.2023 21:46
Není důvod, proč by se správně vytvářené elementy neměly vytvořit prakticky okamžitě. Takže něco děl… Wikan 11.02.2023 21:49	Wikan	11.02.2023 21:49
soubor js.js function start (){ //tady volám třídy které vytváří a plní elementy } // a mimo funkci… Marek9 11.02.2023 22:13	Marek9	11.02.2023 22:13
A proč to děláš mimo tu funkci? Protože pak se ti to zavolá už při načtení souboru, tedy v době kdy… Wikan 11.02.2023 22:18	Wikan	11.02.2023 22:18
Jelikož jsem se dočetl, že ta funkce document.onload=start() se spustí až je všechno načtené, patrně… Marek9 11.02.2023 22:28	Marek9	11.02.2023 22:28
Ale ona se spustí, až když je všechno načtené. Wikan 11.02.2023 22:31	Wikan	11.02.2023 22:31
Jasně, už vím jak to myslíš. Díky poslední Marek9 11.02.2023 22:50	Marek9	11.02.2023 22:50

document.querySelectorAll("li").forEach((li) => {
    li.addEventListener("click", (ev) => {
        ev.srcElement.classList.add("trida");
    });
});

Děkuji, funguje akorát jsem si neuvědomil že se nerefreshuje stránka a tak se to nastaví všem na které kliknu, jde to nějak pohlídat aby byla třída vždy jen u jednoho li?

EDIT:
Napadlo mě před nastavením té class všechny class vymazat , ale nevím jestli to není zbyteční, třeba se to dělá jinak.


var elements = document.querySelectorAll("li" ) 
for ( var i = 0; i<elements.length ; i++)  {
elements[i].classList.remove( 'class' ) ;
}

Zkusil bych něco jako:

document.querySelectorAll("li") .classList.remove( 'class' ) ;

V podstatě je to potřeba udělat tak, jak jsi napsal. Případně takhle:

document.querySelectorAll("li").forEach(e => e.classList.remove("class"));

Dělá to to samé, jenom to má kratší zápis.

teda celý kód:


document.querySelectorAll("li").forEach((li) => {
    li.addEventListener("click", (ev) => {
        li.classList.remove("class");
        ev.srcElement.classList.add("trida");
    });
});

@Wikan:
Děkuji.
Umí Vanila JS procházet na localhostu adresáře ve kterých sama běží?

Čemu říkáš procházet adresáře?

Jestli dokáže vrátit názvy souborů a adresářů nejlépe rekurzivně.

Pokud myslíš v browseru, tak rozhodně ne. To by byla bezpečnostní díra jako prase.
Ale např. v NodeJS to jde. Ale na to se asi neptáš.

Ano, v nodejs to jde. A nejde to i když ten JS poběží jen na localhostu? Díky.

Ne.

Díky za informace, to je důvod proč jsem nic nenašel :(

Když bych chtěl po kliknutí na element LI v UL s id kategorie zavolat funkci mojefunkce(), tedy pouze na děti v UL

<ul id="kategorie">
<li>1</li>
<li>2</li>
</ul>

zkoušel jsem to takto ale nevím proč mi to nejede. Je to jak jsi mi dal tu ukázku, akorát bez toho cyklu. Díky


document.querySelectorAll("kategorie>li").addEventListener('click',mojefunkce) ;

Ten cyklus tam byl z dobrého důvodu. To se pak nediv, že to bez něj nefunguje.

OK díky, myslel jsem, že to jde bez cyklu.
Prosím tě, když v JS vytvářím elementy tak to chvíli trvá a pak dostávám errory, že požadované elementy neexistují, jak se to správně řeší? Díky

Není důvod, proč by se správně vytvářené elementy neměly vytvořit prakticky okamžitě. Takže něco děláš blbě. Ovšem bez kódu a bez těch errorů se dost špatně radí.

soubor js.js

function start (){
//tady volám třídy které vytváří a plní elementy
} 
 
// a mimo funkci hlídám to kliknutí
document.getElementById("kategorie").addEventListener("click", function(e){
	console.log(e.target);
});
       
soubor index.html
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js.js"></script>
</head>
<body></body>
<script>document.onload=start()</script>
</html>

//dostanu chybu
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')[/code]

A proč to děláš mimo tu funkci? Protože pak se ti to zavolá už při načtení souboru, tedy v době kdy ten element ještě neexistuje.

Jelikož jsem se dočetl, že ta funkce document.onload=start() se spustí až je všechno načtené, patrně tedy asi ne.

Ale ona se spustí, až když je všechno načtené.

Jasně, už vím jak to myslíš. Díky

Zpět do poradny Odpovědět na původní otázku Nahoru