title: making a div the same size as an img pure JavaScript
body: <p>fiddle:
  <a href="http://jsfiddle.net/ue7pq/" rel="nofollow">http://jsfiddle.net/ue7pq/</a></p>
  
  <p>and the equivalent jQuery fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Ldn9P/" rel="nofollow">http://jsfiddle.net/Ldn9P/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="project-box"&gt;
    &lt;img src="img/ifix.jpg" class="thumbnail img-responsive"&gt;
    &lt;div class="hover-box"&gt;
      &lt;h2&gt;TITLE&lt;/h2&gt;
      &lt;p&gt;Description of logos that we've made&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>window.onload = function(){
  
  var project = document.getElementsByClassName('project-box');
  img = project[0].getElementsByTagName('img');
  box = document.querySelectorAll('div.project-box div.hover-box');
  imgWidth = img[0].offsetWidth;
  imgHeight = img[0].offsetHeight;
  console.log(imgWidth);
  console.log(imgHeight);
  
  box.style.width = imgWidth+'px';
  box.style.height = imgHeight+'px';
  
  };
  </code></pre>
  
  <p>I'm trying to make the hover-box the same width and height as the img. I'm trying to keep this as pure javascript I made the mistake of learning jQuery first and not JavaScript so now I'm trying to teach myself JavaScript having some issues. The console log says that hoverbox is undefined </p>
  
  <p>error message in console.log:</p>
  
  <pre><code>Uncaught ReferenceError: hoverBox is not defined main.js: 4
  350 
  180 
  Uncaught TypeError: Cannot set property 'width' of undefined
  </code></pre>