1

I want to randomly assign a class at two boxes.

But even with indexOf(randomIndex) === -1) Math.random is duplicating the numbers.

If you refresh you will see that the boxes are changing classes but sometimes they both have the same class, this should happened.

  var grid = document.getElementById("grid-box");

  for (var i = 0; i <= 1; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  var weaponTwo = [];

  while (weaponTwo.length < 1) {
    var randomIndex = parseInt(2 * Math.random());


    if (weaponTwo.indexOf(randomIndex) === -1) {
      weaponTwo.push(randomIndex);


      var drawWtwo = document.getElementById('square' + randomIndex);
      $(drawWtwo).addClass("w2")

    }
  };

  var weapon3 = [];

  while (weapon3.length < 1) {
    var randomIndex = parseInt(2 * Math.random());


    if (weapon3.indexOf(randomIndex) === -1) {
      weapon3.push(randomIndex);


      var draw3 = document.getElementById('square' + randomIndex);
      $(draw3).addClass("w3")

    }
  };
  #grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }
  .w2 {
    background-color: red;
  }

  .w3 {
    background-color: blue;
  }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>
Ian_Miller
  • 79
  • 4
  • 3
    Since you only check weaponTwo array and weapon3 array individually, they can both contain the same random numbers, you have to check both arrays if they can't share a random number. PS: I have no idea why you use a while loop with a condition < 1. Since you only want one number, the while loop will always stop after the first iteration. And the .indexOf() check will always be true, since the arrayis empty to begin with. So the entire structure is just: `var weaponTwo = [ parseInt(2 * Math.random()) ]` and the same for weapon3. – Shilly Mar 20 '19 at 10:29

1 Answers1

1

You are using two different arrays for storing the weapons. Use same array so that the number is not repeated.

  var grid = document.getElementById("grid-box");

  for (var i = 0; i <= 1; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  var weaponTwo = [];

  while (weaponTwo.length < 1) {
    var randomIndex = parseInt(2 * Math.random());


    if (weaponTwo.indexOf(randomIndex) === -1) {
      weaponTwo.push(randomIndex);


      var drawWtwo = document.getElementById('square' + randomIndex);
      $(drawWtwo).addClass("w2")

    }
  };

  while (weaponTwo.length < 2) {
    var randomIndex = parseInt(2 * Math.random());


    if (weaponTwo.indexOf(randomIndex) === -1) {
      weaponTwo.push(randomIndex);


      var draw3 = document.getElementById('square' + randomIndex);
      $(draw3).addClass("w3")

    }
  };
  #grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }
  .w2 {
    background-color: red;
  }

  .w3 {
    background-color: blue;
  }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>

Better Approach : You can create an array of classes and then shuffle it using this alogrithm. Then you can pop from the array and add to classes one by one.

mayank
  • 543
  • 4
  • 14