Tanımlıyorum konsolda boş gözüküyor.
const wrapper = document.querySelector(".wrapper");
let ıd = 1;
let count = 1;
function getData() {
fetch(`https://rickandmortyapi.com/api/character?page=${x}`)
.then((res) => res.json())
.then((res) => {
const datas = res.results;
x++;
datas.map((data) => {
wrapper.innerHTML += `
<div class="box">
<p class="ıd">${count++}</p>
<img class="img" src="${data.image}" alt="">
<h2 class="name">${data.name}</h2>
<p class="gender">${data.gender}</p>
<p class="species">${data.species}</p>
<p class="status">${data.status}</p>
</div>
`;
});
});
}
const boxs = document.querySelectorAll(".box");
console.log(boxs);
Boxs konsolda NodeList [ ] şeklinde boş gözüküyor. Nasıl konsolda gösterebilirim ?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
Eşzamansızlık problemi yaşıyorsun. getData fonksiyonundan fetch sayesinde promise döndür, fonksiyonu çalıştıktan sonra yapacağın işlemieri yap
const wrapper = document.querySelector(".wrapper");
let ıd = 1;
let count = 1;
function getData() {
return fetch(`https://rickandmortyapi.com/api/character?page=${x}`)
.then((res) => res.json())
.then((res) => {
const datas = res.results;
x++;
datas.map((data) => {
wrapper.innerHTML += `
<div class="box">
<p class="ıd">${count++}</p>
<img class="img" src="${data.image}" alt="">
<h2 class="name">${data.name}</h2>
<p class="gender">${data.gender}</p>
<p class="species">${data.species}</p>
<p class="status">${data.status}</p>
</div>
`;
});
});
}
getData().then(() => {
const boxs = document.querySelectorAll(".box");
console.log(boxs);
})