JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<button>Click</button>

<div id="wrapper">
    <img id="img1"src="#">
    <img id="img2"src="#">
    <img id="img3"src="#">
    <img id="img4"src="#">
</div>

CSS

#wrapper {
    max-width: 425px;
}
img {
    width: 200px;
    height: 150px;
}

JavaScript

//display multiple random images

var imageList = [
    "//placehold.it/300x50",
    "//placehold.it/300x60",
    "//placehold.it/300x70",
    "//placehold.it/300x80",
    "//placehold.it/300x90",
    "//placehold.it/300x100",
    "//placehold.it/300x110",
    "//placehold.it/300x120",
    "//placehold.it/300x130",
    "//placehold.it/300x140"
];

function updateRandomImages() {
    var imageElements = $('img');
    $.each(imageElements, function(index, element) {
        displayRandomImage(element);
    });
}

function displayRandomImage(element) {
    var index = getRandomNumber(); 
    $(element).attr( 'src', imageList[index] );
}

function getRandomNumber() {
    return Math.floor(Math.random() * 10);
}

$('button').click(function () {
    updateRandomImages();
});

//start off with some random images
updateRandomImages();