Trying to display random javascript images in separate DIVs

by

I have working javascript code that produces multiple random images in to one DIV.
I have tried a few attempts to display each random image in a separate DIV but with no luck. I got "close" but no success.
Here is working code:

<style>.onetwothreefour {  width: 25%;  display: inline-block;}</style>
<script>
function displayNow() {
var images = ["00.png","01.png","02.png","03.png","04.png","05.png","06.png"];
var selectedIndices = []
while (selectedIndices.length < 4) {
var index = images[Math.floor(Math.random() * images.length)]
if (selectedIndices.indexOf(index) == -1) {
  selectedIndices.push(index)
 }
 }
 for (i = 0; i < selectedIndices.length; i++) {
 var img = document.createElement("img");
 img.src = "imagesfolder/" + selectedIndices[i]
 img.className = "onetwothreefour"
 var src = document.getElementById("images");
 src.appendChild(img);
}
}
</script>
</head>
<body onLoad="displayNow();">
<div id="images"><!-- Images --></div>

<!-- the above works fine but I would like the result below -->

<div class="container"><div class="row">    
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
<div id="" class=""><img src="" id="" class=""></div>
</div></div>

Note: I have jquery and bootstrap loaded.
I appreciate any help.

2 thoughts on “Trying to display random javascript images in separate DIVs”

  1. This approach will be more efficient.

    Explaination : The while loop runs for four times. A random index is generated, and the element is removed from images array, and pushed into selectedIndices array.

    function displayNow() {
  var images = ["00.png", "01.png", "02.png", "03.png", "04.png", "05.png", "06.png"];
  var selectedIndices = [];
  var src = document.getElementById("images");

  while (selectedIndices.length < 4) {
    let index = Math.floor(Math.random() * images.length);
    let img = images.splice(index, 1)[0];
    selectedIndices.push(img)
  }

  selectedIndices.forEach((el) => {
    let img = new Image();
    img.src = "imagesfolder/" + el;
    img.alt = el;
    img.className = "onetwothreefour";
    let imgCont = document.createElement("div");
    imgCont.append(img);
    src.append(imgCont);
  });
}
    .onetwothreefour {
  width: 25%;
  display: inline-block;
}
    <body onLoad="displayNow();">
  <div id="images"></div>

  <div class="container">
    <div class="row">
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
    </div>
  </div>
</body>
    Reply

  2. You’re already using createElement() to build the img elements – you can use the same method to create a new div, add the child img to it, then append that to the DOM. Try this:

    function displayNow() {
  var src = document.getElementById("images");
  var images = ["00.png", "01.png", "02.png", "03.png", "04.png", "05.png", "06.png"];
  var selectedIndices = []
  
  while (selectedIndices.length < 4) {
    var index = images[Math.floor(Math.random() * images.length)]
    if (selectedIndices.indexOf(index) == -1) {
      selectedIndices.push(index)
    }
  }
  
  for (i = 0; i < selectedIndices.length; i++) {
    var img = document.createElement("img");
    img.src = "imagesfolder/" + selectedIndices[i]
    img.className = "onetwothreefour";
    img.title = selectedIndices[i]; // just for this demo
    
    var div = document.createElement('div');
    div.append(img);
    src.append(div);
  }
}
    .onetwothreefour {
  width: 25%;
  display: inline-block;
}
    <body onLoad="displayNow();">
  <div id="images">
    <!-- Images -->
  </div>

  <!-- the above works fine but I would like the result below -->
  <div class="container">
    <div class="row">
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
      <div id="" class=""><img src="" id="" class=""></div>
    </div>
  </div>
</body>
    Reply

Leave a Comment