title: for loop with array for background colors
body: <p>This code takes the background color from an array of divs and colors another div with it. My problem is that I can put any value from 0-2 (0-2 being the array value of the original div) in <code>task1[i].style.background</code> but when I put <code>i</code> so that the loop gives me the value specific to the one moused over it brakes.  I cannot use JQuery, JavaScript only.</p>
  
  <p>EDIT: I expect <code>task1[i].style.background</code> to be equal to the background color of the specific div it hovered over from the loop running through the array. </p>
  
  <pre><code>var task1 = document.querySelectorAll('.t1_colors');
  var task1background = document.querySelector('#task1');
  
  var white = function() {
  task1background.style.background = 'white';
  }
  
  for (var i = 0; i &lt; task1.length; ++i) {
  task1[i].addEventListener('mouseover', function () {
      colorize();
  });
  }
  
  //Something wrong with i
  var colorize = function() {
  task1background.style.background = task1[i].style.background;
  }
  
  for (var i = 0; i &lt; task1.length; ++i) {
  task1[i].addEventListener('mouseout', function() {
          white();
  });
  }
  </code></pre>