My code is working on codepen but not on my editor
Question
My code is working on codepen but not on my editor (PyCharm). This is part of django project. By not working I mean I get a blank page, with no output (no text). I expect to see some text appearing on the screen with infinite scroll
I have tried to read a few answers addressing a similar issue but none of these solutions seem to be working for me/or I am not applying them correctly. Specifically adding the full URL path for getting ScrollWatch through CDN. Here is a sample of my code
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;
}
and 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
});
})();
Not sure what I am doing wrong?
This is the error message I am getting on my browser console
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
UPDATE After typing in console.log(el) to try and figure out why el I am getting a null return I started getting another error message:
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
1 answers
solution1
0 2020-04-03 11:00:18
You need to wrap your script in a document.onload() or better window.onload() clause:
window.onload = function() {
// your script here
}
This is because your script is read while creating the <body> of the document, so if body isn't ready yet, document.body will be null when your script is running.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.