Diskuze – Lekce 14 - AJAX v JavaScriptu - Prohlížeč pokémonů
ZpětUpozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.
proč tady není ke stažení složka s ukázkou funkční stránky a js?
Potřebovala bych si najít chybu, nefunguje mi to. 
, což mě štve, .... konečně
něco, co doma vzbudilo nadšení....
Jan Poláček:7.10.2022 11:21
Ahoj,
za mě tedy funkční, dobré je mít nejdříve část html kódu a poté JavaScript, představme si to, že to jede řádek po řádku, takže např.
let seznam_div = document.getElementById("poke-seznam");přiřazuje element, ale ten už by měl existovat, jinak je to null (prázdno), dobré je také začít používat vývojářské nástroje v prohlížeči, konzole je skvělá věc, viz obrázek, pokud mám první javascript a poté HTML.
a na závěr tedy přikládám celý zdroják, co funguje
<div class="poke-container">
<div id="poke-seznam"></div>
<div id="poke-detaily"></div>
</div>
<script>
function stahniJSON(url, callback)
{
let xhr = new XMLHttpRequest();
xhr.onload = () => {
callback(JSON.parse(xhr.response));
}
xhr.open("GET", url);
xhr.send();
}
function nactiSeznam(url)
{
let seznam_div = document.getElementById("poke-seznam");
seznam_div.innerHTML = "<ul id='poke-seznam-ul'></ul>";
let seznam_ul = document.getElementById("poke-seznam-ul");
stahniJSON(url, (data) => {
for (let pokemon of data.results)
{
let novaPolozka = document.createElement("li");
novaPolozka.innerText = pokemon.name;
seznam_ul.appendChild(novaPolozka);
let poke_url = pokemon.url;
novaPolozka.addEventListener("click", () => nactiPokemona(poke_url));
}
});
}
function nactiPokemona(url)
{
let detaily_div = document.getElementById("poke-detaily");
stahniJSON(url, (data) => {
let html = `
<img src="${data.sprites.back_default}" />
<ul>
<li>Název: ${data.name}</li>
<li>Výška: ${data.height}</li>
<li>Váha: ${data.weight}</li>
</ul>
`;
detaily_div.innerHTML = html;
});
}
nactiSeznam("https://pokeapi.co/api/v2/pokemon");
</script>
Zobrazeno 10 zpráv z 24.