ヌルと他のヌル変数の 'appendChild'プロパティを読み取ることができません

私が始め始める前に、私はWeb開発の新しいことを教えてください。私はこの100％のjavascriptを今もjqueryや他の言語を使用しないようにしたい。ヌルと他のヌル変数の 'appendChild'プロパティを読み取ることができません

次のコードは、このビデオを起源： https://www.youtube.com/watch?v=esa5hJegRfI

私は取得していますエラーは次のとおりです。

Uncaught TypeError: Cannot read property 'appendChild' of null at drawBarChart (script.js:58) at script.js:66

これはjavascriptのである：

var sampleData = [23,45,14,47,24,57,24,35]; 

function _div(id){ 
    return document.getElementById(id); 
} 

function drawBarChart(dataset, idOfContainer){ 

var chartContainer = _div(idOfContainer) 

if(typeof(dataset) != "object"){ 
    return; 
} 

var heightOfContainer = chartContainer.scrollWidth; 

var widthOfContainer = chartContainer.scrollHeight; 

var widthOfBar = parseInt(widthOfContainer/dataset.length) - 2; 

for(var i = 0; i < dataset.length; i++){ 

    var divElement = document.createElement("div"); 

    divElement.setAttribute("class", "div2"); 

    divElement.style.marginLeft = parseInt(i * 2 + i * widthOfBar) + "px"; 
    divElement.style.height = parseInt(dataset[i]) + "px"; 
    divElement.style.width = parseInt(widthOfBar) + "px"; 
    divElement.style.top = (heightOfContainer - parseInt(dataset[i]) - 1) + "px"; 
    chartContainer.appendChild(divElement); 

} 
return false; 
} 



drawBarChart(sampleData, "div1"); 



console.log();

変数heightOfContainer同じエラーのためwidthOfContainerが機能しない：

Uncaught TypeError: Cannot read property 'scrollWidth' of null at drawBarChart (script.js:42) at script.js:66

または

Uncaught TypeError: Cannot read property 'scrollHeight' of null at drawBarChart (script.js:44) at script.js:66

最後のappendChild機能が動作していないよう、私はこれに似た他の問題を見てきましたが、1つを見つけるように見えることはできません。「

<div id="div1" ></div>

私は、このエラーは非常に個人的なことを知っていると多くの人に影響を与えませんが、私は助けを別の場所に求めていると私はcouldn：関連するHTMLコードは単なるdiv要素ですが、あなたはここでそれをしたい場合はそれがありますなぜそれがうまくいかなかったかを調べる。あなたがあなたの時間のために助けてくれてありがとうと思います。

出典

2017-02-14 Gaetan Almela

エラーは、あなたの 'chartContainer'変数が' null'であることを意味します。つまり、 '_div（）'関数がページ内の要素を見つけることができないということです。 – Pointy

あなたのスクリプトが ''に置かれていれば、ブラウザが文書の本文を見る前に実行されるので、コードはそれを見つけられません。 – Pointy

* "jqueryや他の言語はありません" * - jQueryは別の言語ではなく、JavaScriptライブラリです。すなわち、JavaScriptで書かれた関数のコレクションです。 – nnnnnn