未捕获的TypeError：无法设置null的属性'width'

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.

不是一个javascript人，所以你必须原谅我。我试图让这个HTML模板形状，但我一直遇到一个错误，我认为这会导致一些布局问题。

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

未捕获的类型错误：在E能够不设置空的属性 '宽度'（animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js：6）在animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js：94 animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js：95

Here's the snippet of code from animated1

这是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

这是HTML部分

<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

h.width = u

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

在第6行，因为这似乎从它的价值

window.innerWidth

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.

应该以像素为单位返回一个值，但由于某种原因，它似乎没有得到 - 因此返回null - 。我也使用Rails 5，我的其他javascript被加载（并在页面底部调出）就好了，所以我不确定这里发生了什么。任何帮助将不胜感激。

1 个解决方案

#1

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

h = document.getElementById（“demo-canvas”），h .width = u; h不是一个对象

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.

你的h对象为null。您的h值不是具有width属性的对象。也许你可以考虑初始化var h = {}然后你可以使用它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.

getElementById返回一个元素，如果没有给定id的元素，则返回null。所以你需要首先检查document.getElementById（“demo-canvas”）是否为null。

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

#1