Trying to display random javascript images in separate DIVs

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