title: Javascript Cannot read property 'value' of null
body: <p>Good night stackoverflow.</p>
  
  <p>I'm having a problem with a Javascript snippet, that works in JSFiddle but does not work on actual HTML.</p>
  
  <p>I have a gist of why it doesn't work, when the following line is called:</p>
  
  <pre><code>while (list.firstChild) {
  </code></pre>
  
  <p>At that point in time the value of list is still null. So it might at this point crash and burn.</p>
  
  <p>However, why does it work in the fiddle?</p>
  
  <p>I know I can solve this by adding one item previous to the list as to avoid making this null, however, I'm more curious about why the discrepancy appears (How does the jsfiddle and html  differ) and how one would go through to restoring the jsfiddle functionality.</p>
  
  <p><strong>Fiddle of this working</strong></p>
  
  <p><a href="http://jsfiddle.net/vSHQD/9/" rel="nofollow">http://jsfiddle.net/vSHQD/9/</a></p>
  
  <p><strong>My Test.html doesn't work</strong></p>
  
  <pre><code>&lt;script&gt;
  var list = document.getElementById('deliveryIdArray');
  var names = [];
  
  window.changeText2 = function() {
      var deliveryIdentification = document.getElementById('deliveryIdentification').value;
      names.push(deliveryIdentification);//simply add new name to array;
      //array changed re-render list
      renderList();
  }
  
  window.renderList = function(){
      while (list.firstChild) {
          list.removeChild(list.firstChild);
      }
      //create each li again
      for(var i=0;i&lt;names.length;i++){
          var entry = document.createElement('li');
          entry.appendChild(document.createTextNode(names[i]));
          var removeButton = document.createElement('button');
          removeButton.appendChild(document.createTextNode("X"));
          removeButton.setAttribute('onClick','removeName('+i+')');
          entry.appendChild(removeButton);
          list.appendChild(entry);
      }
  }
  
  
  window.removeName = function(nameindex){
      names.splice(nameindex,1);
      //array changed re-render list
      renderList();
  }
  
  window.getDeliveries = function(){
      return names;
  }
  &lt;/script&gt;
  
  &lt;html&gt;
      &lt;body&gt;
          &lt;b&gt;Number &lt;/b&gt;
          &lt;input id = "deliveryIdentification" name = "deliveryIdentification" type = "text" size = "16" maxlength = "30"&gt;
  
          &lt;!-- Array Area Creation --&gt;
          &lt;input type='button' onclick='changeText2()' value='Add' /&gt;
  
          &lt;ol id="deliveryIdArray"&gt;
          &lt;/ol&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any and all help is greatly appreciated, have a great night!</p>