Cannot read property 'getElementsByClassName' of null

Question

I am not sure why I'm getting this javascript error. Having a hard time figuring this one out.

Here's my main.js:

jQuery( document ).ready( function( $ ) {

    /*
    PARTICLES
    -------------------*/
    particlesJS("particles-js", {
        "particles": {
        "number": {
          "value": 80,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": "#823a09"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#823a09",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
        },
        "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 140,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
        },
        "retina_detect": true
    });

    /*
    OWL CAROUSEL
    -------------------*/
    $('#owl-events').owlCarousel({
        margin: 0,
        dots: false,
        nav: true,
        navText: [],
        loop: true,
        // autoPlay: false,
        // autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    });

});

The error is coming from particles.js. On my homepage there is no errors, the homepage is where I'm using <div id="particles-js"></div>. The moment I go to any other page, like here, I get this error. No idea why.

Answer 1

I also found this issue when trying to add particles.js to a webpage. The solution is quite simple. When loading this part of the script:

particlesJS("particles-js", {

particles.js tries to access to the 'particles-js' class. So if you only use <div id="particles-js"></div> in your home page, it's normal that it throws you that exception when you try to load main.js in any other page.

So basically you've to load both, the <div id="particles-js"></div> snippet and main.js in every page you want particles.js working, or change the class used by main.js to a more generic one like, for example, body so you could have it on the background (with a bit of css).