Main.js文件导致整个页面崩溃

Question

我正在制作一个多页网站。我只将这个预加载程序添加到我的索引页面。我在索引页中没有错误，但在其他页面上会有很多错误。

我发现的错误：main.js:10 Uncaught TypeError:无法将属性"textContent"设置为null此处：

function loader(success) {
document.body.style.overflowY = 'hidden';
let time = window.onload;
let obj = document.querySelector('.preLoader'),
inner = document.querySelector('.preLoader .count');
let w = 0,
t = setInterval(function() {
w = w + 1;
inner.textContent = w + '%';
if (w > 99) {
obj.classList.add('loaded');
document.body.style.overflowY = 'auto';
clearInterval(t);
w = 0;
if (success) {
return success(t);
}
}
}, time);
}
loader();

<!--    PRELOADER    -->
<div class="preLoader t_center g_center fixed" id="preLoader">
<div class="count">%</div>
</div>

Answer 1

错误消息告诉您，您的inner变量已设置为null，而不是您期望的对<div>元素的引用。当document.querySelector('.preLoader .count')与任何内容都不匹配时，就会发生这种情况，在不包含预加载程序的网页上就是这样。

在使用之前，您可以通过检查inner的值不是null来避免这个问题：

if (inner) {
inner.textContent = w + '%';
}