title: Cannot read property 'appendChild' of null and other null variables
body: <p>Before I get started I just want to let you know I'm quite new to web development. I also want to keep this 100% javascript so no jquery or other languages for now.</p>
  
  <p>The following code originates from this video:
  <a href="https://www.youtube.com/watch?v=esa5hJegRfI" rel="noreferrer">https://www.youtube.com/watch?v=esa5hJegRfI</a></p>
  
  <p>The error I'm getting is the following:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'appendChild' of null
        at drawBarChart (script.js:58)
        at script.js:66</p>
  </blockquote>
  
  <p>This is the javascript:</p>
  
  <pre><code>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 &lt; 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();
  </code></pre>
  
  <p>The variables heightOfContainer and widthOfContainer don't work because of the same error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'scrollWidth' of null
        at drawBarChart (script.js:42)
        at script.js:66</p>
  </blockquote>
  
  <p>or </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'scrollHeight' of null
        at drawBarChart (script.js:44)
        at script.js:66</p>
  </blockquote>
  
  <p>The last appendChild function does not seem to work and I have looked at other issues similar to this but can't seem to find one. 
  The associated HTML code is just a div but if you want it here it is:</p>
  
  <pre><code>&lt;div id="div1" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>I know this error is quite personal and won't affect many others but I have asked elsewhere for help and I couldn't find out why it didn't work. Hope you can help and thanks for your time. </p>