Не удается прочитать свойство 'getElementsByClassName' со значением NULL

Question

Я не уверен, почему я получаю эту ошибку JavaScript. Трудно понять это.

Вот мой 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
            }
        }
    });

});

Ошибка исходит от particles.js, На моей домашней странице нет ошибок, на домашней странице я использую <div id="particles-js"></div>, В тот момент, когда я перехожу на любую другую страницу, как здесь, я получаю эту ошибку. Понятия не имею почему.

Answer 1

Я также обнаружил эту проблему при попытке добавить частиц.js на веб-страницу. Решение довольно простое. При загрузке этой части скрипта:

particlesJS("particles-js", {

частица.js пытается получить доступ к классу "частиц-js". Так что, если вы используете только <div id="particles-js"></div> на вашей домашней странице это нормально, что выдает это исключение, когда вы пытаетесь загрузить main.js на любую другую страницу.

Таким образом, в основном вы должны загрузить оба, <div id="particles-js"></div> snippet и main.js на каждой странице, где вы хотите, чтобы частица.js работала, или измените класс, используемый main.js, на более общий, например, body, чтобы вы могли иметь его на заднем плане (с небольшим количеством CSS),

Answer 2

Лучше всего сначала проверить это с помощью jQuery . Если Id существует, инициализируйте Particle.js

if ($('#particles-js').length) {
    particlesJS("particles-js", {});
}