title: Javascript Uncaught Reference error Function is not defined
body: <p>Check the Fiddle to see the failure occurring.</p>
  
  <p>When I add Data (Even if I leave it empty) to the text box and try to click "Add" it doesn't do anything.</p>
  
  <p>Opening the Chrome and Firefox console both give me the same error, it says "changeText2()" is not defined.</p>
  
  <p>How can I fix this? I've ran into this error several times and mostly it had really weird workarounds, but I am not sure as to the method for avoiding it or what I'm even doing wrong.</p>
  
  <p>It seems removing the global variable declarations fixes it most of the time, however, I need them in this case and would rather know why and how this error occurs.</p>
  
  <p>Any and all help is greatly appreciated.</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var list = document.getElementById('deliveryIdArray');
  var names = [];
  
  function changeText2() {
      var deliveryIdentification = document.getElementById('deliveryIdentification').value;
      names.push(deliveryIdentification);//simply add new name to array;
      //array changed re-render list
      renderList();
  }
  
  function renderList(){
      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("remove"));
          removeButton.setAttribute('onClick','removeName('+i+')');
          entry.appendChild(removeButton);
          list.appendChild(entry);
      }
  }
  
  
  function removeName(nameindex){
      names.splice(nameindex,1);
      //array changed re-render list
      renderList();
  }
  
  function getDeliveries(){
      return names;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;b&gt;Number(s): &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;
  </code></pre>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/vSHQD/" rel="noreferrer">http://jsfiddle.net/vSHQD/</a></p>