Kann die Eigenschaft 'getElementsByClassName' von null nicht lesen

Question

Ich bin nicht sicher, warum ich diesen Javascript-Fehler bekomme. Es fällt mir schwer, diesen herauszufinden.

Hier ist meine 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 
      } 
     } 
    }); 

}); 

Der Fehler von particles.js kommt. Auf meiner Homepage gibt es keine Fehler, auf der Homepage verwende ich <div id="particles-js"></div>. In dem Moment, in dem ich auf eine andere Seite gehe, wie here, erhalte ich diesen Fehler. Keine Ahnung warum.

Answer 1

Ich habe dieses Problem auch beim Versuch gefunden, particles.js zu einer Webseite hinzuzufügen. Die Lösung ist ziemlich einfach. Beim Laden dieses Teils des Skripts:

particlesJS("particles-js", { 

particles.js auf die ‚Partikel-js‘ Klasse zuzugreifen versucht. Wenn Sie also nur <div id="particles-js"></div> auf Ihrer Homepage verwenden, ist es normal, dass Sie diese Ausnahme auslöst, wenn Sie versuchen, main.js auf einer anderen Seite zu laden.

Also im Grunde haben Sie beide zu laden, das <div id="particles-js"></div> Schnipsel und main.js in jeder Seite, die Sie wollen particles.js arbeiten, oder die Klasse von main.js zu einem generischen verwendet ändern wie, zum Beispiel, Körper so könnte man es im Hintergrund haben (mit ein bisschen CSS).