Question 298430 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to display the output of a JavaScript random image generator horizontally

I’m making a random image generator in JavaScript following this online guide. I’m looking to generate multiple random images as shown in example 2 of the guide but am unsure how to make these images display horizontally instead of vertically. Any help is appreciated!

Here’s the code in question below:

function getRandomImage() {

  var randomImage = new Array();

  randomImage[0] = "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg";
  randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
  randomImage[2] = "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg";
  randomImage[3] = "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg";
  randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
  randomImage[5] = "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg";

  for (let i = 0; i < 5; i++) {

    var number = Math.floor(Math.random() * randomImage.length);

    document.getElementById("result").innerHTML += '<img src="' + randomImage[number] + '" style="width:150px" />';
  }
}

getRandomImage()
<div id="result"></div>
Tags:

4

Answers


  1. 0

    If you want all images in the same row, add the following CSS to make it work.

    div#result{
   display: flex;
   flex-direction: row
}
    Login or Signup to reply.
  2. 0

    I don’t know what you mean, however please replace div tag with this

    Login or Signup to reply.
  3. 0

    I think this meets your requirement.

    function getRandomImage() {

  const randomImage = [];

  randomImage[0] = "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg";
  randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
  randomImage[2] = "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg";
  randomImage[3] = "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg";
  randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
  randomImage[5] = "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg";

  for (let i = 0; i < 5; i++) {

    const number = Math.floor(Math.random() * randomImage.length);

    document.getElementById("result").innerHTML += '<img src="' + randomImage[number] + '" style="width:150px; margin: 5px;" />';
  }
}

getRandomImage()
        #result {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

   
    <div id="result"></div>

    The randomImage array can be declared like this (optional):

    const randomImage = [
            "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg",
            "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg",
            "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg",
            "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg",
            "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg",
            "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg"
];
    Login or Signup to reply.
  4. 0

    In addition to some improvements on how to render a random sequence of distinct images, the OP needs to make use of syntax and properties of the CSS flex box layout.

    function createRandomSequenceOfDistinctImages(targetElement, sourceArray) {
  let markup = '';
  let length = -1;

  while (length = sourceArray.length) {

    const idx = Math.floor(Math.random() * length);
    const src = sourceArray.splice(idx, 1).at(0);

    markup += `<img src="${ src }" />`;
  }
  targetElement.innerHTML = markup;
}

const imageSourceArray = [
  'https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg',
  'http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg',
  'https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg',
  'https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg',
  'https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg',
  'https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg',
];

createRandomSequenceOfDistinctImages(
  document.querySelector('#image-row'), imageSourceArray
);
    #image-row {
  display: flex;
  align-items: center;
}
#image-row img {
  width: 150px;
  margin: 0 4px;
}
    <div id="image-row"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search