Onclick, выделите div, который генерируется динамически - PullRequest
Новая
       27

Onclick, выделите div, который генерируется динамически

0 голосов
/ 25 октября 2019

Я работаю с Wagtail CMS, большая часть моего контента генерируется динамически, что делает такие вещи немного сложными для меня.

В основном я хочу нажать на элемент боковой панели и прокрутить до негораздел на моей странице. 

<div class="sidebar">
<nav>
  <ul>
    {% for block in page.article_content %}
    <li><a class="section-link" id="{{ block.value.header }}"
      href="">{{ block.value.header }}</a></li>
    {% endfor %}
  </ul>
</nav>

Мой код боковой панели генерирует элементы li для каждого block.value.header, который есть у меня на странице. 

<div class="container">
    {% for block in page.article_content %}
    <main>
      <section id="{{ block.value.header }}">
        <h1 class="headline-text section-header" >{{ block.value.header}}</h1>
        <div class="header-bar"></div>
        <div class="case-study-body-container" >
          {{ block.value.description|richtext }}
        </div>
      </section>
    </main>
    {% endfor %}

script.js выглядит так 

JS Code
    let mainNavLinks = document.querySelectorAll("nav ul li a.section-link");
    let mainSections = document.querySelectorAll("main section");

    console.log(mainNavLinks)

    let lastId;
    let cur = [];

    window.addEventListener("scroll", event => {
      let fromTop = window.scrollY;

      mainNavLinks.forEach(link => {
        let section = document.querySelector(link.hash);

        if (
          section.offsetTop <= fromTop &&
          section.offsetTop + section.offsetHeight > fromTop
        ) {
          link.classList.add("current");
        } else {
          link.classList.remove("current");
        }
      });
    });

Ошибка, которую я получаю в данный момент: Uncaught DOMException: Не удалось выполнить 'querySelector' для 'Document': предоставленный селектор пуст.

Вот как выглядит страница, чтобы дать вам, ребята, идею enter image description here

1 Ответ

0 голосов
/ 25 октября 2019

вы можете попробовать обернуть ваш код js следующим образом: 

window.onload = function() {
    your js code
}
...