title: Uncaught TypeError: Cannot set property of undefined - but console.log is showing value
body: <p>I'm trying to select a div with a class name using <code>document.getElementsByClassName()</code> and a variable. However when the function fires I'm getting <em>Uncaught TypeError: Cannot set property 'display' of undefined.</em>
  I've ran some tests with <code>console.log</code> and it's showing that the variable property is defined and that it has a value. Heres the function:</p>
  
  <pre><code>function openLightBox() {
   var itemId = event.target.id; 
   var lightBox = document.getElementsByClassName(itemId);
  
   console.log(lightBox);
   lightBox.style.display = 'block' ;
  };
  </code></pre>
  
  <p>As you can see I'm logging the variable variable <code>lightBox</code> to the console and this is display the correct value. I'm confused why the last line of this function isn't working.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I was missing the fact that var <code>lightBox = document.getElementsByClassName(itemId);</code> is returning an array. The solution was very simple in the end, I simply needed to select the first element in the array by adding <code>[0]</code> after the <code>lightBox</code> variable in the last line of the function:</p>
  
  <pre><code>function openLightBox() {
   var itemId = event.target.id; 
   var lightBox = document.getElementsByClassName(itemId);
   console.log(lightBox);
   lightBox[0].style.display = 'block' ;
  };
  </code></pre>