Not much of a javascript person, so you'll have to forgive me. I'm trying to get this HTML template in shape but I keep running into an error that I believe is causing some layout issues.

Here's the error:

Uncaught TypeError: Cannot set property 'width' of nulL at e (animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:6) at animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:94 at animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:95

Here's the snippet of code from animated1

! function() {
function e() {
    u = window.innerWidth, v = window.innerHeight, g = {
        x: u / 2,
        y: v / 2
    }, f = document.getElementById("main-header"), h = document.getElementById("demo-canvas"), h.width = u, h.height = v, m = h.getContext("2d"), w = [];
    for (var e = 0; u > e; e += u / 20)
        for (var n = 0; v > n; n += v / 20) {
            var t = e + Math.random() * u / 20,
                o = n + Math.random() * v / 20,
                i = {
                    x: t,
                    originX: t,
                    y: o,
                    originY: o
                };
            w.push(i)
        }
    for (var a = 0; a < w.length; a++) {
        for (var r = [], c = w[a], l = 0; l < w.length; l++) {
            var y = w[l];
            if (c != y) {
                for (var p = !1, M = 0; 5 > M; M++) p || void 0 == r[M] && (r[M] = y, p = !0);
                for (var M = 0; 5 > M; M++) p || s(c, y) < s(c, r[M]) && (r[M] = y, p = !0)
            }
        }
        c.closest = r
    }
    for (var a in w) {
        var b = new d(w[a], 2 + 2 * Math.random(), "rgba(255,255,255,0.3)");
        w[a].circle = b
    }
}  

This is the HTML section

<header id="main-header" class="parallax-main-header" data-scroll-index="0">
<canvas class="hide-on-med-and-down" id="demo-canvas"></canvas>
<div class="overlay gradient-color"></div>

<div id="scene" data-hover-only="true" data-relative-input="true" class="parallax" >

    <div class="layer" data-depth="1.0">

I believe the issue is with

h.width= u

on line 6 and since that seems to get its value from

window.innerWidth

which should return a value in pixels, but for some reason, it doesn't seem to be getting that - hence the null return -. I'm using Rails 5 as well and the rest of my javascript is loaded (and called out at the bottom of the page) just fine so I'm not sure what's happening here. Any help would be greatly appreciated.

Not much of a javascript person, so you'll have to forgive me. I'm trying to get this HTML template in shape but I keep running into an error that I believe is causing some layout issues.

Here's the error:

Uncaught TypeError: Cannot set property 'width' of nulL at e (animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:6) at animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:94 at animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js:95

Here's the snippet of code from animated1

! function() {
function e() {
    u = window.innerWidth, v = window.innerHeight, g = {
        x: u / 2,
        y: v / 2
    }, f = document.getElementById("main-header"), h = document.getElementById("demo-canvas"), h.width = u, h.height = v, m = h.getContext("2d"), w = [];
    for (var e = 0; u > e; e += u / 20)
        for (var n = 0; v > n; n += v / 20) {
            var t = e + Math.random() * u / 20,
                o = n + Math.random() * v / 20,
                i = {
                    x: t,
                    originX: t,
                    y: o,
                    originY: o
                };
            w.push(i)
        }
    for (var a = 0; a < w.length; a++) {
        for (var r = [], c = w[a], l = 0; l < w.length; l++) {
            var y = w[l];
            if (c != y) {
                for (var p = !1, M = 0; 5 > M; M++) p || void 0 == r[M] && (r[M] = y, p = !0);
                for (var M = 0; 5 > M; M++) p || s(c, y) < s(c, r[M]) && (r[M] = y, p = !0)
            }
        }
        c.closest = r
    }
    for (var a in w) {
        var b = new d(w[a], 2 + 2 * Math.random(), "rgba(255,255,255,0.3)");
        w[a].circle = b
    }
}  

This is the HTML section

<header id="main-header" class="parallax-main-header" data-scroll-index="0">
<canvas class="hide-on-med-and-down" id="demo-canvas"></canvas>
<div class="overlay gradient-color"></div>

<div id="scene" data-hover-only="true" data-relative-input="true" class="parallax" >

    <div class="layer" data-depth="1.0">

I believe the issue is with

h.width= u

on line 6 and since that seems to get its value from

window.innerWidth

which should return a value in pixels, but for some reason, it doesn't seem to be getting that - hence the null return -. I'm using Rails 5 as well and the rest of my javascript is loaded (and called out at the bottom of the page) just fine so I'm not sure what's happening here. Any help would be greatly appreciated.

• javascript
• jquery
• html
• ruby-on-rails

Share Improve this question Follow edited Nov 30, 2017 at 16:20 niharvey asked Nov 30, 2017 at 15:54 niharveyniharvey 2,80722 gold badges1717 silver badges2424 bronze badges 4

• 3 The error means that h is null, not that the width value is null. – Pointy Commented Nov 30, 2017 at 15:56
• 3 The problem is not the u. The problem is the h. Read the error message carefully. It's there to instruct you. – user8897421 Commented Nov 30, 2017 at 15:56
• 1 Also, you're debugging minified code. That never helps. – user8897421 Commented Nov 30, 2017 at 15:57
• You have h = document.getElementById("demo-canvas"), h.width = u; h is not an object – edkeveked Commented Nov 30, 2017 at 15:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

h = document.getElementById("demo-canvas"), h.width = u; h is not an object

Your h object is null. Your h value is not an object to have width property. Maybe you can consider initializing var h = {} and then after you can use it h.width=u.

getElementById return an element or null is there is no element with the given id. So you need to check first if document.getElementById("demo-canvas") is not null or not.

var h = document.getElementById("demo-canvas")
if(h){
  h.width=u; 
  // you can put here all the others assignments related to h
}

The script tag in your HTML code is probably in the wrong place. If the script tag is at the head tag of your HTML code, then you will get this message because the JavaScript is looking for an element that isn't there yet. HTML reads from top to bottom, so if your JavaScript is looking for an element that isn't there before the script tag, then the code will say the value is null, and you will get this error most times. Put your script tag just before the closing body tag in your HTML code block, and your JavaScript code will probably work just fine. For instance:

    <body>
        "stuff & stuff & more stuff"
        <script src = "yourSourceFileHereIf_Its_A_SeparateFile.js"></ script>
    </body>