Question

未捕获的类型错误：无法将属性“width”设置为 null

2017-11-30

13424

javascript jquery html ruby-on-rails

我不太懂 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">

我认为问题出在第 6 行的

h.width= u

因为它似乎从

window.innerWidth

中获取其值，它应该返回一个以像素为单位的值，但由于某种原因，它似乎没有得到该值 - 因此返回空值 -。我也在使用 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
}

Answer 2

HTML 代码中的脚本标记可能位置错误。如果脚本标记位于 HTML 代码的 head 标记，那么您将收到此消息，因为 JavaScript 正在寻找尚不存在的元素。HTML 从上到下读取，因此如果您的 JavaScript 正在寻找脚本标记之前不存在的元素，则代码将显示值为 null，并且您大多数时候都会收到此错误。将您的脚本标记放在 HTML 代码块中的结束 body 标记之前，您的 JavaScript 代码可能会正常工作。例如：

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