title: " document.getElementById onmouseover and function " does not behave as wished × 108641
body: <p>In this function, it should give the menu items (li's) an specific background (png) out of an array. However; it doesn't. It gives all the li's the background called color 'blue' :(.
  Do you see the problem?</p>
  
  <pre><code>//Gives the menu items a style when hovering over it, in the sequence of the setting in the variable 'backgrounds', on top.
  var backgrounds = ["blue", "green", "pink", "purple"];
  
  function MenuColorChange() {
      for (var i = 0; i &lt;= 10 ; i++) {
          document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseover = function() {
          this.style.backgroundImage= "url(images/" +  backgrounds[(i % backgrounds.length)] + ".png)";
          }
          document.getElementById("custom-menu-item-id-" + (i + 1)).onmouseout = function() {
          this.style.background = 'none'; 
          MenuActiveColor();
          }
      }
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>        &lt;ul&gt;
              &lt;li id="custom-menu-item-id-1"&gt;
                  &lt;a href="#"&gt;
                      Home
                  &lt;/a&gt;
              &lt;/li&gt;
                              /* And 3 li's more... */
          &lt;/ul&gt;
  </code></pre>