How to avoid repeats after drawing in javascript?

Question

How to avoid repeats after drawing in javascript?

94 Views Asked by wymyszony At 04 April 2025 at 19:39

After clicking on the button "go" one of eight words appears. I was wondering how to write a function which prohibits making repeats, so no word will be shown twice. Any ideas? Thanks for all help :)

<!DOCTYPE html>
<html>
<head></head>
<body> 
<button id= "go">go</button>
<div id="word"></div>

<script type="text/javascript">

var words = ["Michael", "Simon", "Peter", "Mark", "Jason", "Paul", "Steve", "George"];

var btn1 = document.getElementById("go");

btn1.addEventListener("click", fill_in);

function getRandomItem(array) {
return array[Math.floor(Math.random() * array.length)]
}

function fill_in(){
var randomWord = getRandomItem(words);  
document.getElementById('word').innerHTML += randomWord + " "; 
}

 </script>
</body>
</html>

Original Q&A

There are 3 best solutions below

Anurag Sinha On 19 December 2016 at 15:20

To avoid repetition, you can remove the words from the array each time it is returned. Lets say getRandomItem returns 'Peter', so remove 'Peter' from the array 'words' before calling getRandomItem again.

To remove the element, you can use below code:

var words = ["Michael", "Simon", "Peter", "Mark", "Jason", "Paul", "Steve", "George"];
var index = words.indexOf("Peter");
if (index > -1) {
    words.splice(index, 1);
}

Paul Fitzgerald On 19 December 2016 at 15:20

To avoid repetition you should remove the name from the array after it has been displayed on the screen. To remove the name from the array you should find the index of the word, and then remove one item from the array at this index.

To do this you would use the following code

var word = words.indexOf(randomWord);
if(word != -1) {
     words.splice(i, 1);
}

You should add this code to your fill_in function and remove the word, after the randomWord has been generated from the array. Once the array is empty you should stop printing to the screen. To check if the array is empty you should check the length of the words array.

function fill_in(){
   var randomWord = getRandomItem(words); 
   var word = words.indexOf(randomWord);
   if(word != -1) {
       words.splice(i, 1);
   } 
   if(words.length != 0){
      document.getElementById('word').innerHTML += randomWord + " "; 
   }
}

Please see below to see the complete code in action.

var words = ["Michael", "Simon", "Peter", "Mark", "Jason", "Paul", "Steve", "George"];
var btn1 = document.getElementById("go");
btn1.addEventListener("click", fill_in);

function getRandomItem(array) {
  return array[Math.floor(Math.random() * array.length)]
}

function fill_in() {
  var randomWord = getRandomItem(words);
  var i = words.indexOf(randomWord);
  if (i != -1) {
    words.splice(i, 1);
  }
  if(words.length != 0) {
    document.getElementById('word').innerHTML += randomWord + " ";
  }
}

<button id="go">go</button>
<div id="word"></div>

**Lewis** · Accepted Answer

You should write method getRandomItem this way.

function getRandomItem(array) {
  return array.splice(Math.floor(Math.random() * array.length), 1)[0];
}

Basically, you need to remove the element after displaying it. Fortunately, Array#splice perfectly fits your case since it will both remove the element and return an array containing it.

How to avoid repeats after drawing in javascript?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in USER-EXPERIENCE

Trending Questions

Popular # Hahtags

Popular Questions