CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paranoia
Paranoia

Reputation: 2070

I get the following JS code: Cannot read property 'clientWidth' of null

I am currently testing some javascript snow for a client, and have a working version on codepen (http://codepen.io/pirrera/pen/qEOqLg).

Now, I implemented that in a site (just plain bootstrap including the JS from codepen), but I get an error saying: Uncaught TypeError: Cannot read property 'clientWidth' of null

I don't know why this isn't working on my site, but it is working on codepen? :(

Here's the JS code:

(function () {

var COUNT = 300;
var masthead = document.querySelector('.sky');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = masthead.clientWidth;
var height = masthead.clientHeight;
var i = 0;
var active = false;

<-snip-> full code here

Upvotes: 2

Views: 15556

Answers (4)

Dennis
Dennis

Reputation: 696

This following part of the code returns null, this is why you cannot access the property clientWidth of it. 

document.querySelector('.sky')

Upvotes: 1

Leo
Leo

Reputation: 13838

You haven't set classname sky to your <body> tag. Or maybe you can use var masthead = document.querySelector('body'); instead.

Upvotes: 1

pejas
pejas

Reputation: 273

You are missing class="sky" on your body.

your body tag should look like this: <body data-twttr-rendered="true" class="sky">

or change query selector in js to: var masthead = document.querySelector('body');

Upvotes: 1

DripDrop
DripDrop

Reputation: 1002

Try this:

  1. Set the id of 'sky' to 'sky'
  2. use document.getElementById('sky').clientWidth;

Good Luck!

Upvotes: 1

Related Questions