How do I display random images to a table

Question

I have a table and a folder of images. I want to randomly insert an image into each cell of the table when the page loads, using html and javascript. I also want the order of the images to be different on every refresh and not have any of them repeat. So far my html looks something like this:

<table>
    <tr>
        <td><img src"" id="00></td>
        <td><img src"" id="01></td>
        <td><img src"" id="02></td>
    </tr>
    <tr>
        <td><img src"" id="10></td>
        <td><img src"" id="11></td>
        <td><img src"" id="12></td>
    </tr>...
</table>

And my js looks something like this:

window.onload = showPics;
let myPics = new Array('images/butterfly.jpg', 'images/cat.jpg', 'images/dinosaur.jpg',
                       'images/dog.jpg', 'images/duck.jpg', 'images/elephant.jpg');

function showPics() {
    let randomPic = Math.floor(Math.random() * myPics.length);
    document.querySelectorAll('#00, #01, #02, #10, #11, #12').src = myPics[randomPic];

However the images are not being displayed. Please help

Answer 1

Your .querySelectorAll() returns array, so you need to loop it. Also you should call new random for each element, not once, otherwise it will contain same image

 window.onload = function() { let myPics = ['https://via.placeholder.com/150?text=1', 'https://via.placeholder.com/150?text=2', 'https://via.placeholder.com/150?text=3', 'https://via.placeholder.com/150?text=4', 'https://via.placeholder.com/150?text=5', 'https://via.placeholder.com/150?text=6' ]; function showPics() { document.querySelectorAll('.img').forEach(function(tag) { let index = getRandomIndex(); tag.src = myPics[index]; tag.addEventListener('click', getImageName); tag.dataset.index = index; }) } function getRandomIndex() { return Math.floor(Math.random() * myPics.length); } function getImageName() { alert(myPics[this.dataset.index]) } showPics(); }

 <table> <tr> <td><img src "" class="img"></td> <td><img src "" class="img"></td> <td><img src "" class="img"></td> </tr> <tr> <td><img src "" class="img"></td> <td><img src "" class="img"></td> <td><img src "" class="img"></td> </tr> </table>

---

In order to have non-repeating images, keep track of indexes, that you already used (make sure you have more or same amount of images then the placeholders).

let usedImages = {};

function getRandomPic {
    let randomPic;

    do {
        randomPic = Math.floor(Math.random() * myPics.length);
    } while (usedImages[randomPic] === true);

    usedImages[randomPic] = true;

    return myPics[randomPic];
}

Answer 2

add a class like changing Images in the all images that you wanna change and change showPics like this, and you dont neet to put new keyword for creating of a array [] will work fine, and dont store the random image in a variable that will always give you same image.

function showPics() {
    document.querySelectorAll('.changeImages').forEach(val => {
      val.src = myPics[Number(Math.floor(Math.random() * myPics.length))];
    })   
}