Мой код работает на codepen, но не на моем редакторе (PyCharm). Это часть проекта django. Не работая, я имею в виду, что я получаю пустую страницу без вывода (без текста). Я ожидаю увидеть какой-нибудь текст, появляющийся на экране с бесконечной прокруткой
Я попытался прочитать несколько ответов на аналогичную проблему, но ни одно из этих решений не работает для меня / или я неправильно их применяю , В частности добавление полного URL-пути для получения ScrollWatch через CDN. Вот пример моего кода
html
{ % load script % }
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Gradient Boost</title>
<link rel="stylesheet" href="{% static 'second/css/app/book.css' %}">
<script src="https://cdn.jsdelivr.net/npm/scrollwatch@2.0.1/dist/ScrollWatch-2.0.1.min.js"></script>
</head>
<body>
<h2><div data-scroll-watch>First Text</div></h2>
<h2><div data-scroll-watch>Second Text</div></h2>
<h3><div data-scroll-watch>Third Text</div></h3>
<script src="{% static 'second/js/app/book.js' %}"></script>
</body>
</html>
css location -> static \ second \ css \ app \ book. css
.watch-container {
font-size: 2em;
width: 75%;
height: 150px;
padding: 20px;
margin: 50px auto;
background-color: #0681CD;
color: #fff;
overflow: auto;
text-align: center;
}
div {
text-align: center;
font-size: 1em;
margin: 200px 0;
opacity: 0;
transition: opacity 1s;
font-weight: normal
}
div.scroll-watch-in-view {
opacity: 1;
}
и javascript location -> static \ second \ js \ app \ book. js
(function() {
var addElements = function() {
var txt = document.createTextNode('Testing');
var el;
el = document.createElement('div');
el.appendChild(txt);
document.body.appendChild(el);
// If we want newly injected elements to be watched, refresh ScrollWatch. It will re-query the dom and start watching new elements.
swInstance.refresh();
};
var swInstance = new ScrollWatch({
watch: 'div',
infiniteScroll: true,
infiniteOffset: 200,
onInfiniteYInView: addElements
});
})();
Не знаете, что я делаю не так?
Это ошибка сообщение, которое я получаю в консоли браузера
Uncaught TypeError: Cannot read property 'appendChild' of null
at X.addElements (book.js:10)
at X.d (ScrollWatch-2.0.1.min.js:662)
at X.f (ScrollWatch-2.0.1.min.js:662)
at new X (ScrollWatch-2.0.1.min.js:662)
at book.js:17
at book.js:24
DevTools failed to parse SourceMap: chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map
DevTools failed to parse SourceMap: chrome-extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map
ОБНОВЛЕНИЕ После ввода в console.log (el), чтобы попытаться выяснить, почему я получаю нулевое возвращение, я начал получать другое сообщение об ошибке:
book.js:13 Uncaught TypeError: Cannot read property 'refresh' of undefined
at X.addElements (book.js:13)
at X.d (ScrollWatch-2.0.1.min.js:662)
at X.f (ScrollWatch-2.0.1.min.js:662)
at X.S (ScrollWatch-2.0.1.min.js:662)
at ScrollWatch-2.0.1.min.js:662
addElements @ book.js:13
d @ ScrollWatch-2.0.1.min.js:662
f @ ScrollWatch-2.0.1.min.js:662
S @ ScrollWatch-2.0.1.min.js:662
(anonymous) @ ScrollWatch-2.0.1.min.js:662