title: Uncaught TypeError: Cannot set property 'innerHTML' of null- when setting the innerhtml to a string from an array
body: <p>In the following code I am trying to set the cat names in a way that doesn't hardcode them to the html. Because of that I am using an array. however whenever I try to set the innerHTML properties to catNames[0] or catNames[1] I get an error. I don't know why it doesn't evaluate that array and find the string and put that on the page.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Cat Clicker&lt;/title&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div&gt;
      &lt;!-- name --&gt;
      &lt;h1 id="creatname1"&gt;y&lt;/h1&gt;
  
      &lt;!-- clickable image --&gt;
      &lt;img id="cat" src="img/cat.jpg"&gt;
  
      &lt;!-- text --&gt;
      &lt;p&gt; You have clicked
          &lt;strong id="counter1"&gt;0&lt;/strong&gt; times
      &lt;/p&gt;
      &lt;/div&gt;
  
  
  &lt;div&gt;
      &lt;!-- name --&gt;
      &lt;h1 id="createname2"&gt;x&lt;/h1&gt;
  
      &lt;!-- clickable image --&gt;
      &lt;img id="cat2" src="img/cat2.jpg"&gt;
  
      &lt;!-- text --&gt;
      &lt;p&gt; You have clicked &lt;strong id="counter2"&gt;0&lt;/strong&gt; times&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>                       (function(){
     var image = document.getElementById('cat'), image2=     
      document.getElementById('cat2'),
      clicks1= document.getElementById('counter1'),clicks2=                         
      document.getElementById('counter2'),
      counterNumber1=0, counterNumber2=0, catNames=["Javi","Esteban"], name1=    
      document.getElementById('createname1'), name2=  
      document.getElementById('createname2');
  
  name1.innerHTML= catNames[0];
  name2.innerHTML= catNames[1];
  
  function imageClickHandler() {
      counterNumber1++;
      clicks1.innerHTML= counterNumber1;
  }
  
  function imageClickHandler2() {
      counterNumber2++;
      clicks2.innerHTML= counterNumber2;
  }
  
  
  
  image.addEventListener('click',imageClickHandler,false);
  image2.addEventListener('click',imageClickHandler2,false);
  
  })();
  </code></pre>