CODEWITHSUNDEEP
javascripthtml
user2247061
user2247061

Reputation: 313

how to randomize multiple images in javascript

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";
    });

Upvotes: 0

Views: 359

Answers (2)

Ashish Lohia
Ashish Lohia

Reputation: 289

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.

Upvotes: 3

HEGDE
HEGDE

Reputation: 511

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

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

Upvotes: 1

Related Questions