Uncaught TypeError：ヌルの 'width'プロパティを設定できません。

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;時間は

あなたの時間オブジェクトがnullのオブジェクトではありません。 hの値は、widthプロパティを持つオブジェクトではありません。たぶん、var h = {}の初期化を検討してから、h.width=uを使用することができます。

getElementById要素を返すか、nullです。指定されたidを持つ要素がありません。したがって、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 
}