How to use NodeList to display random pictures?

Question

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.

I have been trying to generate a random number to use as an index into the imageTabsList node list then using the getAttribute() method to get the longdesc attribute’s value from my HTML file that has the image path source written to the longdesc 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

var ImagePicker = {    
      init: function() {      
    imagePic = document.getElementById('pic');        
    imageTabsDiv = document.getElementById('imageTabs');        
    imageTabList = imageTabsDiv.getElementsByTagName('img');        
    for(var i =0; i <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 I am referencing from the HTML file...

<div id="primaryPic">
    <img src="images/pics/primaryPic.png" id="pic" alt="Primary Content Picture">
    
    <div id="imageTabs">
        <img src="images/pics/imageTab01.png" id="imageTab01" alt="imageTab01" longdesc="images/pics/bavLine.png"><br>
        <img src="images/pics/imageTab02.png" id="imageTab02" alt="imageTab02" longdesc="images/pics/frenchBugler.png"><br>
        <img src="images/pics/imageTab03.png" id="imageTab03" alt="imageTab03" longdesc="images/pics/Gendarme_a_Cheval_1870.png"><br>
        <img src="images/pics/imageTab04.png" id="imageTab04" alt="imageTab04" longdesc="images/pics/primaryPic.png">
    </div>
</div>

I am trying to reference the longdesc attribute to change the pic every time the page is reloaded.

Answer 1

To select an image at random from imageTabList, you can do this:

var randomImg = imageTabList[Math.floor(Math.random() * imageTabList.length)];

---

To get a random longDesc attribute each time you load the page, you can use this code:

var imgs = document.getElementById("imageTabs").document.getElementsByTagName("img");
var randomImg = imgs[Math.floor(Math.random() * imgs.length)]
var randomLong = randomImg.getAttribute("longdesc");

FYI, you should be using data-longdesc="xxxx" at the attribute for HTML5 compatibility.

---

Here's an explanation:

Math.random()

creates a random floating point number between 0 and 1 (including 0, not including 1) such as 0.4857462391.

Math.random() * imageTabList.length

creates a random floating point number between 0 and imageTabList.length (including 0, not including imageTabList.length such as 8.239824379.

To make that value an integer (for an array index), we call Math.floor() on it as in:

Math.floor(Math.random() * imageTabList.length)

Now you have a random integer between 0 and imageTablList.length - 1 that you can use to grab a random item from that NodeList.

---

If you need any further help, please show your HTML as it isn't quite clear from your code what you're trying to do.