微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么在加载DOM内容后不能选择特定元素?

如何解决为什么在加载DOM内容后不能选择特定元素?

我在线上搜索了很多数据,但仍然对DOMcontentLoadedwindow.onload感到困惑。在代码中,加载窗口时,将显示导航栏和第一页。我可以看到gameTitle和carouselTemplate渲染的图像。现在,我想使用Intersection Observer API进行无限滚动。因此,在document.addEventListener('DOMContentLoaded',())中,我尝试获取gameTitle,但控制台显示null。我不知道为什么在DOM加载后无法获取元素?如果将DOMContentLoaded更改为滚动,则可以获取该元素。我该如何改善这个问题?谢谢!

const baseAPI = 'https://api.url.com/';
const topAPI = `${baseAPI}games/top?limit=5`;
const Api = `${baseAPI}streams/`;
let offset = 0;

function carouselTemplate(gameName,gameNameurl) {
  return `
      <div class="col-ms-12 col-md-12 pl-0 pr-0 d-flex align-items-center justify-content-center">
        <p class="gameTitle">${gameName}</p>
        <img class="image" src="https://static-cdn.jtvnw.net/ttv-Boxart/${gameNameurl}-272x380.jpg" alt="First slide">
      </div>  
  `
}

window.onload = function () {
  fetchTopgames(topAPI)
    .then((data) => {
      const topGames = [...data.top];
      const gameName = topGames[0].game.name
      const defaultGamename = encodeURIComponent(gameName);
      let topGamestr = ''
      topGames.map(topGame => {
        topGamestr += navbarTemplate(topGame.game.name);
      })
      navList.innerHTML = topGamestr;
      carousel.innerHTML = carouselTemplate(gameName,defaultGamename);

      // if navbar is created
      if (navList) {
        const firstChild = navList.firstElementChild.firstElementChild;
        firstChild.classList.add('activeColor');
        getgames(Api,defaultGamename,offset);
      }
    })
    .catch((error) => {
      console.log(error);
    })
}

document.addEventListener('DOMContentLoaded',() => {
  const gameName = document.querySelector('.gameTitle');
  console.log(gameName)
  const gameNameurl = encodeURIComponent(gameName);
  const options = {
    root: document.querySelector('.container-fluid'),threshold: 1
  };
  const observer = new IntersectionObserver((entry) => {
    console.log(entry)
  },options)
  const target = document.querySelector('.observer');
  // let callback = ([entry]) => {
  //   if (entry && entry.isIntersecting) {
  //     getgames(Api,gameNameurl,offset);
  //     offset += 20;
  //   }
  // }

  observer.observe(target);
})

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。