how to randomize multiple images in javascript

Question

i am pretty new to javascript (a little over 2 months into my studies) and am starting my first project. the end goal is to have a set of baseball team logo images (right now 6 images but eventually i would like to expand this to more) randomized every time a button is clicked. i had researched on how to do this and came across the fisher yates algorithm used in a while loop, and various uses of random number generation. decided to use the fisher yates.

at the moment, my code seems to work. i followed 1 image and i couldn't see a specific pattern. my other concerns are if i can achieve the same functionality using 1 loop and also cleaning up my code so its not so repetitive.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>sports</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div class="container">
    <h1>Sports Random</h1>
    <br>
    <div class="row">
      <div class="col-sm-2"> <img id="team1"src="images\sports\team1.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team2"src="images\sports\team2.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team3"src="images\sports\team3.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team4"src="images\sports\team4.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team5"src="images\sports\team5.jpg" alt=""></div>
      <div class="col-sm-2"> <img id="team6"src="images\sports\team6.jpg" alt=""></div>
    </div>
    <br>
    <button id="button">Random</button>
    <button id="reset">Reset</button>
  </div>
  </div>

  <script src="js/main.js"></script>
</body>

</html>

 var button = document.getElementById("button");
    var reset = document.getElementById("reset");
    var team1 = document.getElementById("team1");
    var team2 = document.getElementById("team2");
    var team3 = document.getElementById("team3");
    var team4 = document.getElementById("team4");
    var team5 = document.getElementById("team5");
    var team6 = document.getElementById("team6");

    var pics = ["team1.jpg", "team2.jpg", "team3.jpg", "team4.jpg", "team5.jpg", "team6.jpg"];

    var teams = [team1, team2, team3, team4, team5, team6];


    button.addEventListener("click", function random() {

      var i = pics.length,
        rNum, temp;

      // shuffle pictures using fisher yates
      while (--i > 0) {
        rNum = Math.floor(Math.random() * (i + 1));
        temp = pics[rNum];
        pics[rNum] = pics[i];
        pics[i] = temp;
      }

      // display images
      for (var i = 0; i < teams.length; i++) {
        teams[i].src = "images\\sports\\" + pics[i];
      }


    });

    reset.addEventListener("click", function reset() {
      team1.src = "images\\sports\\team1.jpg";
      team2.src = "images\\sports\\team2.jpg";
      team3.src = "images\\sports\\team3.jpg";
      team4.src = "images\\sports\\team4.jpg";
      team5.src = "images\\sports\\team5.jpg";
      team6.src = "images\\sports\\team6.jpg";
    });

Ashish Lohia · Accepted Answer · 2017-07-13 09:03:27Z

Just add an id to the div class="row" id="parent">

and replace the code like this.

   var button = document.getElementById("button");
   var reset = document.getElementById("reset");
   var originalChildren = 
   Array.from(document.getElementById("parent").children);

   button.addEventListener("click", function random() {
     var list = document.getElementById("parent");
     for (var i = list.children.length; i >= 0; i--) {
         list.appendChild(list.children[Math.random() * i | 0]);
     }
   });

   reset.addEventListener("click", function reset() {
     document.getElementById("parent").innerHTML = "";
     for (var i =0 ; i< originalChildren.length; i++) {
        document.getElementById("parent").appendChild(originalChildren[i]);
     }
   });

Additionally, I would also suggest creating the children dynamically then appending them to parent instead of putting them in HTML. But, this is entirely up to you. Modified the code so you don't have to keep the elements in JS side.

HEGDE · Accepted Answer · 2017-07-12 06:53:10Z

1

Here is a Fiddle that might help you: https://jsfiddle.net/yha6r5sy/1/

You can use list.children to add it to main div

answered Jul 12, 2017 at 6:53

HEGDE

5115 silver badges18 bronze badges

Collectives™ on Stack Overflow

how to randomize multiple images in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related