ParticlesJS gives error when trying to use as background

ParticlesJS gives error when trying to use as background
0

#1

I’ve been working on my portfolio project, and I midway through the project, I wanted to change the background of my site to a particlesJS background. I have tried in several ways to do it, but it doesn’t seem to be working and gives the error particles.js:1 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at window.particlesJS (particles.js:1) at script.js:9 in the console.
My code can be found in the branch testing at https://github.com/ApCoder123/apcoder123.github.io/tree/testing
(Sorry Code’s a bit messy)

Thanks


#2

First of all you need to clean up mess in your code. You’re calling jquery three times. That’s just crazy :grin: and also scripts belong before </body> tag not after </html> tag. As for particles.js why don’t you just do it like they show in the example here? https://github.com/VincentGarreau/particles.js/


#3

I tidied up my HTML code. :wink:

As for Particles JS, I was trying to do it like in this codepen example: https://codepen.io/alexander-holman/pen/rebroK

In the example, it has this code:
`

[Your content here]
` When doing this on my own site, it doesn't work, but if I paste my code into that codepen, it displays over the particles as expected. On my site, the particles don't appear.

#4

You need to remember about calling your scripts in correct order. Bootstrap depends on jQuery so you should load jQuery before Bootstrap. Then you script.js depends on particle.js so you call first particle.js and then script.js. Finally your example doesn’t work because you call your script in <head> section while DOM is not yet raedy so the <div id="particle"></div> is not rendered yet and you get en error. The solution would be just to get all of your scripts and place them at the bottom before </body> tag in the following order:

<script src="jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="script.js"></script>

#5

It works! Thank you so much! :grinning: