Случайный img из набора изображений

Мне нужно сделать таблицу 3x3 со случайными изображениями при перезагрузке страницы.

Вот мой код, но он меняет все 9 ячеек. что я действительно хочу сделать, так это сделать снимки каждой ячейки из разных пулов. Например, ячейка 1.1 может делать снимки только из папки img1, 1.2 - только из папки img2 и т. д.

<!DOCTYPE html>

<head>
    <link rel = "stylesheet" href = "CSS.css" type = "text/css" />
    <title>Random</title>
</head>

<body onload = "addEventListeners();">

    <div id = "table">
        <table align=center>
            <tr>
                <td><img class = "element" id = "image1" src = "img/1.jpg" /></td>
                <td><img class = "element" id = "image2" src = "img/2.jpg" /></td>
                <td><img class = "element" id = "image3" src = "img/3.jpg" /></td>
            </tr>
            <tr>
                <td><img class = "element" id = "image4" src = "img/4.jpg" /></td>
                <td><img class = "element" id = "image5" src = "img/5.jpg" /></td>
                <td><img class = "element" id = "image6" src = "img/6.jpg" /></td>
            </tr>
            <tr>
                <td><img class = "element" id = "image7" src = "img/7.jpg" /></td>
                <td><img class = "element" id = "image8" src = "img/8.jpg" /></td>
                <td><img class = "element" id = "image9" src = "img/9.jpg" /></td>
            </tr>
        </table>
    </div>

    <script>
        var imagelist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg"];


        function diffImage() {
            var output = '';
            whichImage = Math.floor(Math.random() * imagelist.length);
            output = imagelist[whichImage];
            imagelist.splice(whichImage, 1);
            return output;
        }

        document.getElementById("image1").src = diffImage();
        document.getElementById("image2").src = diffImage();
        document.getElementById("image3").src = diffImage();
        document.getElementById("image4").src = diffImage();
        document.getElementById("image5").src = diffImage();
        document.getElementById("image6").src = diffImage();
        document.getElementById("image7").src = diffImage();
        document.getElementById("image8").src = diffImage();
        document.getElementById("image9").src = diffImage();
        document.getElementById("image10").src = diffImage();
        document.getElementById("image11").src = diffImage();
        document.getElementById("image12").src = diffImage();

    </script>
</body>

</html>

javascript html

25.10.2018 19:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто перемешайте свой массив, а затем назначьте img1 = arr[0], img2 = arr[1] и так далее. Для перемешивания вы можете использовать это:

function shuffleArray(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

25.10.2018 19:58

Ответ принят как подходящий

// you want three pools so let’s create three pools
var imagePools = [
      // your images from folder 1
      ["https://placekitten.com/201/140", "https://placekitten.com/199/140", "https://placekitten.com/200/140"],
      // your images from folder 2
      ["https://placekitten.com/g/201/140", "https://placekitten.com/g/199/140", "https://placekitten.com/g/200/140"],
      // your images from folder 3
      ["https://placekitten.com/201/140", "https://placekitten.com/199/140", "https://placekitten.com/200/140"],
];


function diffImage(pool) {
    // get the pool
    var pool = imagePools[pool];
    return pool[Math.floor(Math.random() * pool.length)];
}
var imgElementCount = 9;

for (var i = 1; i < imgElementCount + 1; i++) {
    // this will always get you an integer of 1, 2 or 3
    var pool = (i - 1) % 3;
    document.getElementById("image"+i).src = diffImage(pool);
}

    <div id = "table">
    <table align=center>
        <tr><td><img class = "element" id = "image1" src = "img/1.jpg" /></td>
        <td><img class = "element" id = "image2" src = "img/2.jpg" /></td>
        <td><img class = "element" id = "image3" src = "img/3.jpg" /></td>
        </tr>
        <tr><td><img class = "element" id = "image4" src = "img/4.jpg" /></td>
        <td><img class = "element" id = "image5" src = "img/5.jpg" /></td>
        <td><img class = "element" id = "image6" src = "img/6.jpg" /></td>
        </tr>
        <tr><td><img class = "element" id = "image7" src = "img/7.jpg" /></td>
        <td><img class = "element" id = "image8" src = "img/8.jpg" /></td>
        <td><img class = "element" id = "image9" src = "img/9.jpg" /></td>
        </tr>
        </table>
    </div>

Это могло быть рабочим решением. Пояснения в комментариях.

а что, если мне нужно 9 бассейнов?

— 25.10.2018 20:43

Просто добавьте еще 6 массивов с изображениями в imagePools и в цикле замените часть пула на var pool = (i - 1) % 9;

— 25.10.2018 21:25

25.10.2018 20:08