Невозможно прочитать свойство 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>. В тот момент, когда я перехожу на любую другую страницу, например here, я получаю эту ошибку. Не знаю, почему.

Answer 1

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

particlesJS("particles-js", { 

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

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