Diskusia – 12. diel - Ajaxu v JavaScripte - Prehliadač pokemonov
SpäťUpozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.
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>
Zobrazené 10 správy z 24.