Как отобразить случайные изображения в таблице

Question

У меня есть таблица и папка с изображениями. Я хочу случайным образом вставить изображение в каждую ячейку таблицы при загрузке страницы, используя html и javascript. Я также хочу, чтобы порядок изображений был разным при каждом обновлении sh, и чтобы ни одно из них не повторялось. Пока что мой html выглядит примерно так:

<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>

А мой js выглядит примерно так:

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];

Однако изображения не отображаются. Пожалуйста, помогите

Answer 1

добавьте класс, подобный changing Изображения во всех изображениях, которые вы хотите изменить, и измените showPics, как это, и вы не хотите ставить ключевое слово new для создания массива [] будет работать нормально, и Не храните случайное изображение в переменной, которая всегда будет давать вам одно и то же изображение.

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

Answer 2

Ваш .querySelectorAll() возвращает массив, поэтому вам нужно l oop его. Также вы должны вызывать new random для каждого элемента, а не один раз, иначе он будет содержать одно и то же изображение

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>

---

Чтобы иметь неповторяющиеся изображения, следите за индексами, которые вы уже использовали (убедитесь, что у вас больше или такое же количество изображений затем заполнители).

let usedImages = {};

function getRandomPic {
    let randomPic;

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

    usedImages[randomPic] = true;

    return myPics[randomPic];
}