Error in Console (Chrome)

[derjulian]

The Console shows some error.

"particles.js:1495 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null"

[elenadobrescu21]

I get the same error, did you manage to fix it?

[Xaz16]

Try use id, instead of class. I solve this problem exactly.

[nchgn]

Try moving the script to the end of the Body, just before the footer

[cterrazas2]

I'm getting this same error.

[cterrazas2]

So I had the <div id="particles-js"></div> in a partial, my app is an Angular SPA. Everything was loaded, (particles.js, particles.json, etc.) and then I would get this error.

However when I moved the <div id="particles-js"></div> to the index.html where the script was at then it loaded and worked.

[xxalexdevxx]

Here is how to solve the problem in Foundation 6 if you happen use Zurb's build tools. You have to configure the JS across several files in the project. Here is a really useful Stack Overflow post: How to add JavaScript to Just One Page

[piyushmakhija]

I had faced the same issue when trying to use particles.js in Angular 4.0.

1. Initially I was loading the particles.js script in index.html; starter script particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); }); in index.html file and <div id="particles-js"></div> in app component html The app worked fine when using ng serve but when I was building the angular project using ng build and serving it through my express server, I couldn't see the animations and was getting an error in the console: Uncaught TypeError: Cannot read property 'getElementsByClassName' of null".

Then I fixed the bug using solution suggested by @cterrazas2 and it worked.

2. After reading http://bit.ly/2ni9vvB on how to import external libraries in angular components, I loaded the particles.js script in angular CLI config and loaded starter script when the component is initialized(ngOnInit). Also shifting <div id="particles-js"></div> back in app component now worked.

Hope this helps.

[miradnan]

I had this same issue. It appears that we need to have <div id="particles-js"></div> in the html when we are loading particles js. Otherwise, it will throw an error.

[ghost]

I got the same error. particles.js:1495 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null

I use Angular 2. When I put <div id="particles-js"></div> in partial html, I'd got above error. But I moved it into index.html, there was no error. Instead of it, it(particles-js) didn't work for me.

In this case, how can I manage this?

[ghost]

@piyushmakhija So how did you run it in a component with Angular 2?

[ahirhasmukh]

I am getting same error

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at window.particlesJS (scripts.bundle.js:1496) at scripts.bundle.js:1557

[mdjwel]

I'm facing the same problem with WordPress theme. Can anyone give us the solution, please?

[KBPsystem777]

Seems like particle.js is not compatible for React. Try to check this reactified particle.js: https://www.npmjs.com/package/react-particles-js

[codingninja007]

@naxogon suggestion worked for me, i believe it's because the particleJS() needs the element specified in it to be present(created) already. If we introduce the script above that element then first the script will be executed and error will occur as it won't find the target element for output. Correct me if i'm incorrect, i'm still a newbie

[AmaiBatate]

@codingninja007 I am not a pro, but the way you explained the problem worked for me to find a solution, that is, have the script load after the div and not before as naxogon also suggested.

[techno-trace]

var pJS_targ = document.getElementById("particles-js"); if (pJS_targ) { pJS_val = document.getElementById("particles-js").value; console.log("pJS : " + pJS_val); require('./particles-sel.js'); //After a lot of research I got this solution for getting rid of the error getElementsByClassName }

//particles-sel.js contains code below

/* Handles Particles.js simulation*/ particlesJS("particles-js", { "particles": { "number": { "value": 250, "density": { "enable": false, "value_area": 5000 } }, "color": { "value": "#fff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#fff" }, "polygon": { "nb_sides": 5 }, "image": { "src": " ", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": false, "anim": { "enable": false, "speed": 8, "opacity_min": 0.1, "sync": false } }, "size": { "value": 9.5, "random": true, "anim": { "enable": false, "speed": 150, "size_min": 0.1, "sync": true } }, "line_linked": { "enable": false, "distance": 200, "color": "#fff", "opacity": .5, "width": 1 }, "move": { "enable": true, "speed": 10, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 1200, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "grab" }, "onclick": { "enable": false, "mode": "push" }, "resize": false }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "grab": { "distance": 400, "size": 40, "duration": 2, "opacity": 4, "speed": 3 }, "grab": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); var update; update = function () { if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {} requestAnimationFrame(update); }; requestAnimationFrame(update);

[AwesomeZaidi]

I'm still struggling on this. I have a Node app using Express, I have the script at the end of my body before my footer and loading the id particles-js div before it but still getting this error. I believe i have my scripts in order of hierarchy as well. Any ideas please and thank you!

[LakshMatai]

I'm using Angular 6 and was facing this issue, the app worked fine in index.html but while loading from one of its component it was failing.

I used this following fix - In my component.ts file I declared particlesJS variable -

declare var particlesJS:any

Then in the function ngAfterViewInit I wrote all the function:

ngAfterViewInit(){ particlesJS('particles-js',

{ "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } .....)}

Let me know if you're still facing the issue

[sallu161]

Try moving the script to the end of the Body, just before the footer

It did solve problem, by placing all the jquery libraries at the end of the body. Thank you! @naxogon

[AwesomeZaidi]

Nothing really worked for me... can't remember my exact solution but I just re did it from scratch all in one file and it worked then. Then, I isolated things one at a time testing at each phase to make sure it wouldn't break. Hope this helps anyone scratching their heads, sometimes if its a small enough thing you can just restart and avoid any improper module injections by doin it all in one file :)

[codejockie]

If you're using Angular and trying to separate things out into components, you should add this to index.html:

<div id="particles-js"></div>

[sashiksu]

In my case I'm using react and very same problem occurs. First put your particles-js fucntion in index.html. Then in your UI component where you want to call function call it in there. For example I want to call it in class based component. So in the constructor I called it as below, constructor() { super(); window.test(); } (I wanted to use particles in my footer)

[matteobruni]

You can use this https://github.com/matteobruni/tsparticles, it has also wrappers for jQuery, React, Vue, Preact and Angular ready to use.

[DanielOberlechner]

I had the same error and solved it likes this: My id name was "particle-js" but i had particles.js.load('particle-js)! The 's' was missing and therefore it did not work. I don't use angular or something else so it was a pretty stupid error I guess.

Kind regards from Italy, Daniel :)

[germanfica]

I used this following fix - In my component.ts file I declared particlesJS variable -

declare var particlesJS:any

@LakshMatai It works. Thank you so much! I was close I knew it! That I would probably need to do something like that in a component.

I'm using Angular 13.3.5. Here's a quick setup to make particle.js work in an Angular component:

import { Component, OnInit } from '@angular/core';

declare var particlesJS: (tagId: string, params: any) => void;
@Component({
  selector: 'app-hero-header',
  templateUrl: './hero-header.component.html',
  styleUrls: ['./hero-header.component.scss']
})
export class HeroHeaderComponent implements OnInit {
  ngAfterViewInit() {
    particlesJS("particles-js", {
      "particles": {
        "number": {
          "value": 67,
          "density": {
            "enable": true,
            "value_area": 800
          }
        }
      }
    }
    );
  }

  ngOnInit(): void {
  }
}

[markwrightdev]

You can use this https://github.com/matteobruni/tsparticles, it has also wrappers for jQuery, React, Vue, Preact and Angular ready to use.

@germanfica this is the easiest way, there's an angular component and everything is documented here: https://github.com/matteobruni/tsparticles/tree/main/components/angular#readme

With TypeScript support, and no custom code to be searched anywhere