Question

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

这是错误：

未捕获的TypeError：无法设置属性＆＃39; width＆＃39; nulL at e （animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js：6）在 animated1.self-b9a4c7f67d0005da19c8ed8c98254dd633747e3b9330fd1ca028e36c397fd765.js：94 在 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对象为空。您的h值不是具有width属性的对象。也许您可以考虑初始化var h = {}然后再使用它h.width=u。

getElementById返回一个元素，如果没有给定id的元素，则返回null。因此，您需要先检查document.getElementById("demo-canvas")是否为空。

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代码中的script标签可能位于错误的位置。如果script标签位于HTML代码的head标签中，那么您将收到此消息，因为JavaScript正在寻找尚不存在的元素。 HTML是从上到下读取的，因此，如果您的JavaScript正在寻找script标记之前不存在的元素，则代码将指出该值为null，并且您通常会遇到此错误。将您的脚本标签放在HTML代码块中的右正文标签之前，您的JavaScript代码可能会正常工作。例如：

:C: i:: I

未捕获的TypeError：无法设置属性＆＃39; width＆＃39; null

2 个答案: