Placed text in random block

Question

I have an array of values. And I have 4 blocks on my html page. and I need, to show some value in some block. But it must be random.

$(document).ready(function() {

  var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4'];

  var blocks = $('.item_blocks');
  var blocksLength = blocks.length;

  for (var i = 0; i < data.length; i++) {
    var indexBlock = Math.floor(Math.random() * blocksLength);
    blocks.eq(indexBlock).html(data[i]);
    console.log(indexBlock, data[i]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_blocks"></div>
<div class="item_blocks"></div>
<div class="item_blocks"></div>
<div class="item_blocks"></div>

What is the issue then? what you want to achieve? – Sorangwala Abbasali Jan 25 '17 at 12:57 — Sorangwala Abbasali, Jan 25 '17 at 12:57

score 0 · Answer 1 · edited May 23 '17 at 12:16

As per your current implementation there is no guarantee that every block will be populated with text .

A simpler solution will be to shuffle the array and sequential update the text for item_blocks.

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

$(document).ready(function() {
  var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4'];
  var arr = shuffleArray(data);
  $('.item_blocks').text(function(index) {
    return arr[index]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_blocks"></div>
<div class="item_blocks"></div>
<div class="item_blocks"></div>
<div class="item_blocks"></div>

Used @Laurens Holst's answer for shuffleArray()

score 0 · Answer 2 · answered Jan 25 '17 at 12:59

Problem with your code is the fact that you are using random to select the block and you are not guaranteed to use all the blocks. So you can either remove the items as you use it or sort the items randomly.

$(document).ready(function() {

  var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4'];

  var blocks = $('.item_blocks').sort( function () {
    return Math.random() > .5 ? -1 : 1;  //just randomly swaps position in the collection
  }).text( function(i){ //using a function in text is like using each()
    return data[i]; 
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
</ul>

or just sort the array randonly

$(document).ready(function() {

  var data = ['Block 1', 'Block 2', 'Block 3', 'Block 4'];
  
  data.sort(function () {
    return Math.random() > .5 ? -1 : 1;
  });
  
  var blocks = $('.item_blocks').text( function(i){ 
    return data[i]; 
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
  <li class="item_blocks"></li>
</ul>

Placed text in random block

2 Answers2