Avoid duplicates from random selection

Question

This code fetches multiple words from the same arrays of words and parse it into HTML. Inside the get_word function, how can I avoid the same word from being selected and printed multiple times?

NO: Car, Car, House, Cat

YES: Car, Dog, House, Cat

var words = ["Buss", "Plane", "Car","Dog","Cat", "House"];

get_random = function (list) {
  return list[Math.floor((Math.random()*list.length))];
} 



get_word = function (number) {
  for (i = 1; i < number+1; i++) {
      word = get_random(words);
      document.getElementById("word"+i).innerHTML = word;

  } 
  
} 

start = function () {
 get_word(3);
}

div.buttons {
  text-align: center;
  margin: 15px;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#word1,
#word2,
#word3,
#word4 {
  text-align: center;
  font-size: 48px;
  color: red;
  bottom: 15px;
}

<div id="word1"></div>
<div id="word2"></div>
<div id="word3"></div>
<div id="word4"></div>

<div class="buttons">
  <button class="button" onclick="start();">Try it</button>
</div>

Does this answer your question? [Random number generator without dupes in Javascript?](https://stackoverflow.com/questions/3796786/random-number-generator-without-dupes-in-javascript) — blex, Mar 08 '20 at 15:59
Replace "number" with "word" in the question above, and you have your solution — blex, Mar 08 '20 at 15:59
Also I recommend to get used to `for (let i = 0; i < number; i++) {` instead of using 1-based loops - that also means starting your div on 0 `
` — mplungjan, Mar 08 '20 at 16:06

score 1 · Answer 1 · answered Mar 08 '20 at 16:12

I think the solution to your problem is using pop(), although you will need to make sure that you keep a copy of your original list somewhere if you need to reference it later, as pop will change the list and reduce its length.

This means your function get_random should look closer to:

get_random = function (list)
{
    return list.pop(Math.floor((Math.random()*list.length)))
}

score 1 · Answer 2 · answered Mar 08 '20 at 16:14

I think you can shuffle the array then get get each item of the the shuffled array.

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

get_word = function (number) {
  shuffle(words);
  for (i = 1; i < number+1; i++) {
      word = words[i - 1];
      document.getElementById("word"+i).innerHTML = word;

  } 
}

score 1 · Accepted Answer · answered Mar 08 '20 at 16:21

I aggree with hoangdv but it can be event simpler

const words = ["Bus", "Plane", "Car","Dog","Cat", "House"];
 
function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
  return array
}

get_word = function (number) {
  return shuffle(words).slice(0,number)
}
console.log(get_word(3))
console.log(get_word(3))
console.log(get_word(3))

score 1 · Answer 4 · answered Mar 08 '20 at 17:06

Add an extra variable can resolve the issue.

get_word = function (number) {
  var out = [];
  for (i = 1; i < number+1; i++) {
      word = get_random(words);
      if(out.findIndex(w=>w==word) > -1){
         out.push(word);
         document.getElementById("word"+i).innerHTML = word;
      }
  }
}

Avoid duplicates from random selection

4 Answers4