title: Trying to understand JS loops
body: <p>I'm struggling with understanding JS loops.
  I found an online tutorial for a button changing random colors for a div id=&quot;container&quot;. However, it turns out that the random colors are frequently repeated after a click. I want to change the code and loop through the array colors one by one and change the color of the div#container after each click. This is my code:</p>
  <pre><code>let colors = [&quot;blue&quot;, &quot;yellow&quot;, &quot;green&quot;, &quot;brown&quot;, &quot;orange&quot;];
  let btn = document.getElementById(&quot;btn&quot;);
  
  btn.addEventListener(&quot;click&quot;, function () {
    let container = document.getElementById(&quot;container&quot;);
    for (i = 0; i &lt; colors.length; i++) {
      let selectColor = colors[i];
    }
  
    container.style.backgroundColor = selectColor;
  });
  </code></pre>
  <p>I get the error: assignment to undeclared variable i. Can someone help me out?</p>