Jak najít element podle odkazu a přiřadit mu class v JavaScriptu

Ahoj, mám prosím ještě jeden problém ohledně JS.

Znám ID, dejme tomu, že je ID=6 a potřebuji v seznamu menu elementu A přidat třídu, jedná se o položku která má v tomto konkrétním případě odkaz #6. Poradí někdo? Potřebuji to bez knihovny jQuery. Děkuji

<ul class="menu">
<li><a href="#1">Nějaký text</a></li>
<li><a href="#2">Nějaký text</a></li>
<li><a href="#3">Nějaký text</a></li>
<li><a href="#4">Nějaký text</a></li>
<li><a href="#5">Nějaký text</a></li>
<li><a href="#6">Nějaký text</a></li>
<li><a href="#7">Nějaký text</a></li>
<li><a href="#8">Nějaký text</a></li>
<li><a href="#9">Nějaký text</a></li>
..
..
<li><a href="#1501">Nějaký text</a></li>
<li><a href="#1502">Nějaký text</a></li>
..
..
</ul>

Předmět	Autor	Datum
$('a[href="#2"]').addClass("druhy"); bez jQuery môžete využiť vanillaJS document.querySelector taky… Mlocik97 17.02.2019 16:28	Mlocik97	17.02.2019 16:28
V jQuery je mi k ničemu a nějaký vanillaJS taky. jak jsem psal, potřebuji to v čistém JS :( Dědekk 17.02.2019 16:37	Dědekk	17.02.2019 16:37
VanillaJS = čistý JavaScript https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelecto… Mlocik97 17.02.2019 16:39	Mlocik97	17.02.2019 16:39
Aha, tak že to bude správně takto? var id = 2 document.getElementsByTagName('A').getAttribute('href… Dědekk 17.02.2019 17:18	Dědekk	17.02.2019 17:18
To je nesmysl. document.querySelector("a[href='"+ id +"']").classList.add('activni') Wikan 17.02.2019 17:42	Wikan	17.02.2019 17:42
Děkuji, to ale bude brát všechny elementy A, ne jen v tom menu, jak to do toho prosím přidat? Děkuji Dědekk 17.02.2019 18:10	Dědekk	17.02.2019 18:10
querySelector(".menu a[href='"+ id +"']") Wikan 17.02.2019 18:37	Wikan	17.02.2019 18:37
Děkuji, funguje. Dostávám ale chybu které taky nerozumím:( Uncaught TypeError: Cannot read property… Dědekk 17.02.2019 19:11	Dědekk	17.02.2019 19:11
No tak to asi nefunguje, když dostáváš tuhle chybu. Máš správně nastavený obsah proměnné id? Wikan 17.02.2019 19:21	Wikan	17.02.2019 19:21
Ono to fakt funguje, ale je tam pořád ta chyba. Co přesně myslíš? Proměnná id existuje vždy. Dědekk 17.02.2019 20:00	Dědekk	17.02.2019 20:00
Tak to musí být v jiné části kódu. Wikan 17.02.2019 20:07	Wikan	17.02.2019 20:07
Tak jdu hledat.. PS: nevíš prosím, proč tady qfqc první příkaz (za pouziti id) funguje a druhý (za… Dědekk 17.02.2019 20:19	Dědekk	17.02.2019 20:19
Stačí se podívat na názvy těch metod: getElementById - vrací jeden element getElementsByClassName -… Wikan 17.02.2019 20:25	Wikan	17.02.2019 20:25
Děkuji, myslíš takto bez cyklu? rfqc Dědekk 17.02.2019 20:36	Dědekk	17.02.2019 20:36
Ne. Buď tam přidej ještě jeden cykl nebo použij první prvek, ale ten původní cykl tam nech. Wikan 17.02.2019 20:38	Wikan	17.02.2019 20:38
nebo použij první prvek, ale ten původní cykl tam nech. Tak ted ti asi nerozumím. A tohle je špatn… Dědekk 17.02.2019 20:49	Dědekk	17.02.2019 20:49
var divs = document.getElementsByClassName('b')[0].children; for (var i = 0; i < divs.length; i++) {… Wikan 17.02.2019 20:52	Wikan	17.02.2019 20:52
Už jsem to pochopil jak to myslíš, děkuju. tak tohle opravdu hází tu chybu a id existuje console (… Dědekk 17.02.2019 21:02	Dědekk	17.02.2019 21:02
Buď si zařiď aby id obsahovalo na začátku i # nebo si to uprav na: querySelector("a[href='#"+ id +"'… Wikan 17.02.2019 21:05	Wikan	17.02.2019 21:05
Chyba je pryč, můžeš mi odpovědět snad na poslední dotaz, co se přesně stane když se klikne na ty od… Dědekk 17.02.2019 21:51	Dědekk	17.02.2019 21:51
Ten kód se vykoná jednou při načtení stránky. Není důvod, proč by se to mělo potom měnit. Pokud chce… Wikan 18.02.2019 07:36	Wikan	18.02.2019 07:36
Tohle už něco dělá ale nevím zda je to OK, pokud ano, tak celý JS kód mám vložit do té funkce? Děkuj… Dědekk 18.02.2019 11:07	Dědekk	18.02.2019 11:07
Ano, třeba tak. Wikan 18.02.2019 11:09	Wikan	18.02.2019 11:09
OK, tak já tu patlaninu jdu nějak slepit dokupy ;) Zatím velmi moc děkuji... poslední Dědekk 18.02.2019 11:41	Dědekk	18.02.2019 11:41

$('a[href="#2"]').addClass("druhy");

bez jQuery môžete využiť vanillaJS document.querySelector taky to je na jeden riadok.

V jQuery je mi k ničemu a nějaký vanillaJS taky. jak jsem psal, potřebuji to v čistém JS :(

VanillaJS = čistý JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Aha, tak že to bude správně takto?

var id = 2
document.getElementsByTagName('A').getAttribute('href')[href == id].classList.add('activni')

To je nesmysl.

document.querySelector("a[href='"+ id +"']").classList.add('activni')

Děkuji, to ale bude brát všechny elementy A, ne jen v tom menu, jak to do toho prosím přidat? Děkuji

querySelector(".menu a[href='"+ id +"']")

Děkuji, funguje.
Dostávám ale chybu které taky nerozumím:(

Uncaught TypeError: Cannot read property 'classList' of null

No tak to asi nefunguje, když dostáváš tuhle chybu.
Máš správně nastavený obsah proměnné id?

Ono to fakt funguje, ale je tam pořád ta chyba.
Co přesně myslíš? Proměnná id existuje vždy.

Tak to musí být v jiné části kódu.

Tak jdu hledat..

PS: nevíš prosím, proč tady qfqc první příkaz (za pouziti id) funguje a druhý (za použití class) nefunguje?

Stačí se podívat na názvy těch metod:
getElementById - vrací jeden element
getElementsByClassName - vrací pole elementů

Takže si tam buď udělej ještě jeden cykl, nebo prostě použij první prvek, pokud ti to tak stačí.

Děkuji, myslíš takto bez cyklu? rfqc

Ne. Buď tam přidej ještě jeden cykl nebo použij první prvek, ale ten původní cykl tam nech.

nebo použij první prvek, ale ten původní cykl tam nech.

Tak ted ti asi nerozumím.

A tohle je špatné řešení?
tfqc
Ono to funguje ale nevím zda se to neaplikuje i na ten div s třídou b, jestli se to opravdu aplikuje pouze na ty vnořené div-y.

var divs = document.getElementsByClassName('b')[0].children;

for (var i = 0; i < divs.length; i++) {
    divs[i].style.color = 'red';
}

V tom dalším případě se to aplikuje právě na ten div se třídou b a vnitřní to pouze podědily.

Už jsem to pochopil jak to myslíš, děkuju.

tak tohle opravdu hází tu chybu a id existuje

console (id); //vypise id
document.querySelector("a[href='"+ id +"']").classList.add('activni') //Uncaught TypeError: Cannot read property 'classList' of null

Je tohle

("a[href='"+ id +"']")

opravdu dobře když jsou ty odkazy ve tvaru

<a href="#6">blabla</a>

ptám se jelikož když nahradím id přímo číslem, dostanu stejnou chybu :(

("a[href='"+ 6 +"']")

Buď si zařiď aby id obsahovalo na začátku i # nebo si to uprav na:
querySelector("a[href='#"+ id +"']")

Chyba je pryč,
můžeš mi odpovědět snad na poslední dotaz, co se přesně stane když se klikne na ty odkazy v seznamu?

Tady ještě přikládám celou html aby to nějak upřesnil

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li><a href="#0">Odkaz</a></li>
<li><a href="#1">Odkaz</a></li>
<li><a href="#2">Odkaz</a></li>
<li><a href="#3">Odkaz</a></li>
<li><a href="#4">Odkaz</a></li>
<li><a href="#5">Odkaz</a></li>
<li><a href="#6">Odkaz</a></li>
<li><a href="#7">Odkaz</a></li>
<li><a href="#8">Odkaz</a></li>
<li><a href="#9">Odkaz</a></li>
</ul>
</body>
</html>
<script>
console.log(window.location.href);
</script>

Když budu klikat na ty odkazy v tom seznamu, url se v prohlížeči bude měnit (číslo za mřížkou) ale console.log(vypisuje neustále první url které se načetlo při prvním zobrazení stránky).

==============================

Jinak velmi moc děkuji za tvé rady a čas!

Ten kód se vykoná jednou při načtení stránky. Není důvod, proč by se to mělo potom měnit.
Pokud chceš reagovat na změnu hashe, tak se pověs na událost onhashchange.

Tohle už něco dělá ale nevím zda je to OK, pokud ano, tak celý JS kód mám vložit do té funkce? Děkuji

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul>
<li><a href="#0">Odkaz</a></li>
<li><a href="#1">Odkaz</a></li>
<li><a href="#2">Odkaz</a></li>
<li><a href="#3">Odkaz</a></li>
<li><a href="#4">Odkaz</a></li>
<li><a href="#5">Odkaz</a></li>
<li><a href="#6">Odkaz</a></li>
<li><a href="#7">Odkaz</a></li>
<li><a href="#8">Odkaz</a></li>
<li><a href="#9">Odkaz</a></li>
</ul>
</body>
</html>
<script>
window.onhashchange = function (){
console.log(window.location.href);
}
</script>

Ano, třeba tak.

OK, tak já tu patlaninu jdu nějak slepit dokupy ;) Zatím velmi moc děkuji...

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