javascript - 未捕获的类型错误 : Cannot set property 'width' of null

Question

我不太懂 JavaScript，所以请原谅我。我正在尝试使此 HTML 模板成形，但我不断遇到错误，我认为该错误导致了一些布局问题。

错误如下:

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

这是来自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
    }
}  

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

我认为问题在于

h.width= u

在第 6 行，因为它似乎从

中获取其值

window.innerWidth

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

Answer 1

h = document.getElementById("demo-canvas"), h.width = u; h 不是对象

您的 h 对象为 null。您的 h 值不是具有 width 属性的对象。也许你可以考虑初始化var h = {}，然后就可以使用它h.width=u。

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
}