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返回＆＃39;彼得＆＃39;所以删除彼得＆＃39;从数组＆＃39;单词＆＃39;在再次调用getRandomItem之前。

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

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

请参阅下文以查看完整的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您应该以这种方式编写方法getRandomItem。

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

基本上，您需要在显示后删除元素。幸运的是，Array#splice非常适合您的情况，因为它将删除元素并返回包含它的数组。

在javascript中绘制后如何避免重复？

3 个答案: