title: Change background color with a loop onclick
body: <p>here is my js fiddle : <a href="http://jsfiddle.net/pYM38/16/" rel="nofollow">http://jsfiddle.net/pYM38/16/</a></p>
  
  <pre><code> var box = document.getElementById('box');
  
   var colors = ['purple', 'yellow', 'orange', 'brown', 'black'];
  
   box.onclick = function () {
  
      for (i = 0; i &lt; colors.length; i++) {
  
          box.style.backgroundColor = colors[i];
  
  
        }
  
  };
  </code></pre>
  
  <p>I'm in the process of learning JavaScript. I was trying to get this to loop through each color in the array, but when i click the box (demonstration on jsfiddle) it goes to the last element in the array.</p>