get values from array randomly onload to class

Question

I have an array arr[] which contain eighteen values, I have six classes with paragraph p with id values

I need to take six values randomly from arr[] and display in place of 'x'.

how can I achieve it?

<script>
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
  arrayLength = arrayVariable.length;

for (i = 0; i < arrayLength; i++) {
  
}
</script>

.ab {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  ;
  color: #FFFFFF;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

<div class="ab"><p id="values">x </p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>
<div class="ab"><p id="values"> x</p></div>

https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array — Vinit Desai, Sep 07 '18 at 09:16
Any value assigned to the `id` attribute needs to be unique, it can only appear once in the entire DOM. — Thijs, Sep 07 '18 at 09:25

score 0 · Answer 1 · answered Sep 07 '18 at 09:26

Should those be unique? If yes:

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
places.forEach(function (place) {
  var index = Math.floor(Math.random() * arrayVariable.length)
  place.innerText = arrayVariable[index]
  arrayVariable.splice(index, 1)
})

Orelsanpls · Answer 2 · 2018-09-07T09:45:01.673

I am copying the initial array, then for each DOM element you want to insert array random element on, I pick up an element from the temporary array, then insert it into the DOM. To make the data unique, I remove the picked data from the temporary array.

const arrayVariable = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen'];

// Get random number
function getRandom(max) {
  return Math.floor(Math.random() * 10);
};

// Select a random value from the initial array
function getRandomFromArray(array) {
  const random = getRandom(array.length - 1);

  const value = array[random];

  array.splice(random, 1);

  return value;
}

const tmp = [
  ...arrayVariable,
];

// Treat each bloc
$('.ab').each(function() {
  const value = getRandomFromArray(tmp);

  $(this).html(value);
});

.ab {
  float: left;
  width: 10em;
  height: 10em;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ab">
  <p id="values">x </p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

<div class="ab">
  <p id="values"> x</p>
</div>

score 0 · Answer 3 · answered Sep 07 '18 at 09:36

Kindly keep your id unique in a document. Check the w3org doc here

You may use the name attribute for your <p> tags as <p name="values">x</p>

Then use the following JS to achieve your result.

Check the JS Fiddle

var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen',]
arrayLength = arrayVariable.length;
  
ptags = document.getElementsByName("values");

for(i=0;i<ptags.length;i++){
  ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
}

Hank Phung · Answer 4 · 2018-09-07T09:52:01.200

You can just shuffle your array then get six values of the array continuously.

Function shuffle:

/**
 * Shuffles array in place.
 * @param {Array} a items An array containing the items.
 */
 function shuffle(a) {
   var j, x, i;
   for (i = a.length - 1; i > 0; i--) {
     j = Math.floor(Math.random() * (i + 1));
     x = a[i];
     a[i] = a[j];
     a[j] = x;
   }
   return a;
 }

Implementation:

var places = document.querySelector('.ab>values')
var arrayVariable = ['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen']
shuffle(arrayVariable);
places.forEach(function (place) {
  place.innerText = arrayVariable.pop();
})

Reference: Array shuffle

get values from array randomly onload to class

4 Answers4