CODEWITHSUNDEEP
javascriptarrays
saw
saw

Reputation: 15

How to display random multiple images not repeatedly in JS?

I can display only the first div and can't figure out how to display the rest of the div in randomly. Thanks in advance!

/* here is My JS*/

  var img_array = ["bomb.gif", "frown.gif", "grim.gif", "smile.gif"];

  /* run function every 'set up' time */
  setInterval(function() {
    randomImages();
  }, 2500);

  /* Generate random images and display from the array */
  function randomImages() {
    var randomImage =
      img_array[Math.floor(Math.random() * img_array.length)];

    var imgNode = document.querySelector(".imgsrc");

    imgNode.classList.remove("random");
    imgNode.classList.add("transitioning-src");

    setTimeout(() => {
      imgNode.src = randomImage;
      imgNode.classList.remove("transitioning-src");
      imgNode.classList.add("random");
    }, 500);

    document.querySelector(".imgsrc").src = randomImage;
  }

Upvotes: 0

Views: 392

Answers (2)

saw
saw

Reputation: 15

Thanks you all. Now my image is displaying randomly from the array. But still figure it out not repeatedly the image. 

 var img_array = [
        "laugh.jpg",
        "sad-face.jpg",
        "smiley.jpg",
        "artists.jpg",
        "detective.jpg",
        "monster.jpg",
        "smileyface.jpg",
        "tear.jpg",
        "tongue.jpg"
      ];
      
      /* run function every 'set up' time */
      setInterval(function() {
        randomImages();
      }, 1500);

      /* Generate random images and display from the array */
      function randomImages() {
        var randomImage =
          img_array[Math.floor(Math.random() * img_array.length)];

        /* randomly choose from html element */
        var arrayImg = document.getElementById("random").children;

        var randomArrayImg =
          arrayImg[Math.floor(Math.random() * arrayImg.length)];



        randomArrayImg.src = randomImage;

        // document.querySelector(".imgsrc").value = randomImage;
      }
#random {
        display: flex;
        justify-content: space-between;
        width: 1000px;
        margin: 50px auto;
      }

      img {
        width: 150px;
        height: 150px;
      }
<div id="random">
      <img src="laugh.jpg" class="imgsrc" alt="" />

      <img src="sad-face.jpg" class="imgsrc" alt="" />

      <img src="detective.jpg" class="imgsrc" alt="" />

      <img src="tongue.jpg" class="imgsrc" alt="" />

      <img src="tear.jpg" class="imgsrc" alt="" />
  </div>

Upvotes: 0

K&#233;vin Bibollet
K&#233;vin Bibollet

Reputation: 3623

As I said in comments, it is the DOM <li> node you need to select and show randomly, not the src of the first img element, because you already have all your images in your HTML. There an example:

const imgList = ['bomb.gif', 'frown.gif', 'grim.gif', 'smile.gif'];

/* Run function every 'set up' time */
setInterval(function() {
  randomImages();
}, 2500);

/* Show random image */
function randomImages() {
  const img = document.querySelector('ul#random > li.logo > img');
  const nextSrc = imgList[Math.floor(Math.random() * imgList.length)];
  
  img.src = nextSrc;
  img.alt = nextSrc;
}
<ul id="random">
  <li class="logo">
    <img src="bomb.gif" class="imgsrc" alt="bomb.gif" />
  </li>
</ul>

But you can also use your image array and update the src attribute, but one <li> suffice:

/* Run function every 'set up' time */
setInterval(function() {
  randomImages();
}, 2500);

/* Show random <li> */
function randomImages() {
  const liNodes = document.querySelectorAll('ul#random > li.logo');
  const next = Math.floor(Math.random() * liNodes.length);
  
  for (let i in liNodes) {
    const li = liNodes[i];
    
    if (li instanceof HTMLElement) {
      li.style.display = 'none';
    }
  }
  
  liNodes[next].style.display = '';
}
<ul id="random">
  <li class="logo">
    <img src="bomb.gif" class="imgsrc" alt="bomb.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="smile.gif" class="imgsrc" alt="smile.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="frown.gif" class="imgsrc" alt="frown.gif" />
  </li>

  <li class="logo" style="display:none" >
    <img src="grim.gif" class="imgsrc" alt="grim.gif" />
  </li>
</ul>

Upvotes: 1

Related Questions