title: JavaScript: Arrays, Loops and Functions
body: <p>Currently manipulating the DOM and am having trouble using a <strong>for loop to access arrays</strong>. I need to add <strong>id</strong> attributes to the HTML from the ones in the array when moused over.</p>
  
  <p>The goal is to hover over an id element and add the id value from the myIds array and also switch the url src in #mainImg (which is a .jpg) to the one in the array using the imgUrl array.</p>
  
  <p>Essentially the project is a list where one hovers over a link to display an image.</p>
  
  <p>I figured out a long version (requires me to type a function for each #id (there are over 20 ids/urls)) but want to shorten it using loops!</p>
  
  <p>Here is my javascript.</p>
  
  <pre><code>    var imgUrl = [ 'url 1', 'url 2', 'url 3' ];
  
      var myIds = [];
       myIds [0] = 'a';
       myIds [1] = 'b';
       myIds [2] = 'c';
  
      for (var i = 0; i &lt; imgUrl.length; i++) {
          imgUrl[i];
          $("[id]").mouseover(function() { 
              var src1 = imgUrl[i];
                  $("#mainImage").attr("src", src1);
      });
      }
  
      for (var i = 0; i &lt; myIds.length; i++) {
          myIds[i];
          $("[id]").mouseover(function(){
              myIds[i];
              var idSrc = myIds[i];
                  $("li [id]").attr("id", idSrc);
          }); 
          };
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div class="main"&gt;
          &lt;img id="mainImage" src="original-url"&gt;
      &lt;/div&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="#" id=""&gt;one&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id=""&gt;two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id=""&gt;three&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>