无法读取 null 的属性“getElementsByClassName”

Posted 2023-04-14

【中文标题】无法读取 null 的属性“getElementsByClassName”

【英文标题】：Cannot read property 'getElementsByClassName' of null

【发布时间】：2016-11-24 00:01:10

【问题描述】：

我不确定为什么会收到这个 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，我得到了这个错误。不知道为什么。

【参考方案1】：

我在尝试将particles.js 添加到网页时也发现了这个问题。解决方案非常简单。加载这部分脚本时：

particlesJS("particles-js", 

particles.js 尝试访问“particles-js”类。所以如果你只使用 <div id="particles-js"></div> 在您的主页中，当您尝试在任何其他页面中加载 main.js 时，它会抛出该异常是正常的。

所以基本上你必须在你希望 particles.js 工作的每个页面中加载<div id="particles-js"></div> sn-p 和 main.js，或者更改 main 使用的类.js 转换成更通用的格式，例如 body，这样您就可以将它放在后台（带有一点 css）。

【讨论】：

谢谢！这也正是我的问题。

【参考方案2】：

最好的方法是你先用 jQuery 检查它。如果 Id 存在则初始化 Particle.js

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