Main.js file causing the whole page to crash

Question

I am making a multipage website. I add this preloader to my index page only. I don't get errors in index pages but get many errors on my other pages for this.

The errors i found: main.js:10 Uncaught TypeError: Cannot set property 'textContent' of null Here :

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>

You must be loading `main.js` in other files that don't have the preloader HTML. — Barmar, Aug 04 '21 at 20:45
just make sure you're on index before you run that piece of code. — dandavis, Aug 04 '21 at 20:46

score 0 · Answer 1 · answered Aug 05 '21 at 19:41

The error message is telling you that your inner variable has been set to null instead of the reference to the <div> element that you are expecting. This happens when document.querySelector('.preLoader .count') doesn't match anything, which will be the case on the web pages where you don't include your preloader.

You can avoid the problem by checking the value of inner is not null before you use it:

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

Main.js file causing the whole page to crash

1 Answers1