javascript画图后如何避免重复？

Question

点击按钮后 "go" 出现八个单词之一。我想知道如何编写一个禁止重复的函数，这样一个词就不会显示两次。有任何想法吗？感谢所有帮助:)

<!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>

Answer 1

为避免重复，您可以在每次返回数组时从数组中删除单词。比方说 getRandomItem returns 'Peter'，所以在再次调用 getRandomItem 之前从数组 'words' 中删除 'Peter'。

要删除元素，您可以使用以下代码：

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

Answer 2

为避免重复，您应该在 name 显示在屏幕上后从数组中删除它。要从数组中删除名称，您应该找到单词的索引，然后从该索引处的数组中删除一项。

为此，您将使用以下代码

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

您应该将这段代码添加到您的 fill_in 函数中，并在从数组生成 randomWord 之后删除单词。一旦数组为空，您应该停止打印到屏幕。要检查数组是否为空，您应该检查 words 数组的长度。

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 + " "; 
   }
}

请参阅下面的完整代码。

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>

Answer 3

你应该这样写方法getRandomItem。

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

基本上，您需要在显示元素后将其移除。幸运的是，Array#splice 非常适合您的情况，因为它会同时删除元素和 return 包含它的数组。

javascript画图后如何避免重复？

How to avoid repeats after drawing in javascript?

html

javascript

user-experience