v2.5.2
Giriş yap

Tanımlıyorum konsolda boş gözüküyor.

mlhslckr
221 defa görüntülendi
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 ?

Cevap yaz
Cevaplar (1)
abdullahx
454 gün önce

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);
})