title: How to use NodeList to display random pictures?
body: <p>I have a problem that I need help with. I have been working on this for about half a day already. I am a new software developer still in school.</p>
  <p>I have been trying to generate a random number to use as an index into the <code>imageTabsList</code> node list then using the <code>getAttribute()</code> method to get the <code>longdesc</code> attribute’s value from my HTML file that has the image path source written to the <code>longdesc</code> attribute below my for loop. So every time I reload the page, a new image is displayed. My question is how do I accomplish this in my .js file</p>
  <pre><code>var ImagePicker = {    
        init: function() {      
      imagePic = document.getElementById('pic');        
      imageTabsDiv = document.getElementById('imageTabs');        
      imageTabList = imageTabsDiv.getElementsByTagName('img');        
      for(var i =0; i &lt;imageTabList.length; i++) {        
        imageTabList[i].onclick = imageTabList.imageTabClick           
        function imageTabClick() {          
          imagePath = this.getAttribute('longdesc');            
          imagePath.src = imagePic;          
        };        
      };      
    randomIndex = imageTabList[randomPics];      
    randomIndex = imageTabsDiv.getAttribute('longdesc');      
    randomIndex.src = imagePic;      
    randomPics: function() {      
      return Math.floor(Math.random() + 1);      
    };      
    };    
  };    
  Core.start(ImagePicker);
  </code></pre>
  <p>Code I am referencing from the HTML file...</p>
  <pre><code>&lt;div id=&quot;primaryPic&quot;&gt;
      &lt;img src=&quot;images/pics/primaryPic.png&quot; id=&quot;pic&quot; alt=&quot;Primary Content Picture&quot;&gt;
      
      &lt;div id=&quot;imageTabs&quot;&gt;
          &lt;img src=&quot;images/pics/imageTab01.png&quot; id=&quot;imageTab01&quot; alt=&quot;imageTab01&quot; longdesc=&quot;images/pics/bavLine.png&quot;&gt;&lt;br&gt;
          &lt;img src=&quot;images/pics/imageTab02.png&quot; id=&quot;imageTab02&quot; alt=&quot;imageTab02&quot; longdesc=&quot;images/pics/frenchBugler.png&quot;&gt;&lt;br&gt;
          &lt;img src=&quot;images/pics/imageTab03.png&quot; id=&quot;imageTab03&quot; alt=&quot;imageTab03&quot; longdesc=&quot;images/pics/Gendarme_a_Cheval_1870.png&quot;&gt;&lt;br&gt;
          &lt;img src=&quot;images/pics/imageTab04.png&quot; id=&quot;imageTab04&quot; alt=&quot;imageTab04&quot; longdesc=&quot;images/pics/primaryPic.png&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am trying to reference the <code>longdesc</code> attribute to change the pic every time the page is reloaded.</p>