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

点击“go”按钮后，出现八个单词中的一个。我想知道如何编写一个禁止重复的函数，所以不会显示两次。有任何想法吗？感谢所有帮助:)如何避免在JavaScript中绘制后重复？

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

来源

2016-12-19 wymyszony

你应该写方法getRandomItem这种方式。

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

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

来源

2016-12-19 15:29:50 Lewis

这对我来说完美<3 – wymyszony

为了避免重复，您可以从阵列则返回每次取出的话。假设getRandomItem返回'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); 
}

来源

2016-12-19 15:20:21

为了避免重复，则应该从阵列已经在屏幕上显示后取出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>

来源

2016-12-19 15:20:22

伟大的工作。非常感谢:) – wymyszony

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

回答

相关问题