我正在尝试创建一个程序,为一件衣服分配一个随机的、唯一的颜色。我使用一个数组来存储已经挑选的颜色,并尝试(使用for
和while
)来消除重复的颜色。
我知道我做错了。似乎一旦一种颜色被发现为非复制品,它就不会被再次测试,因此偶尔仍会导致重复。
有没有人能帮我把这个弄好?如果可能的话,我想避免那些花哨的库东西。我不擅长编程,我想更清楚地了解“为什么”和“如何”。
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- the goal is to randomly assign a color to a piece of clothing and have no duplicate colors -->
<meta charset="utf-8">
<!-- displays the clothing and color on-screen -->
shirt: <span id="shirt"></span><br> shorts: <span id="shorts"></span><br> hat: <span id="hat"></span><br> coat: <span id="coat"></span>
<br><br>
<!-- testing prints to track what's going on-->
colorPicked first: <span id="pickedColor"></span><br>
<br><br> colors so far: <span id="soFar"></span>
</head>
<body>
<script>
// establish an array with seven color options
var colors = ['orange', 'red', 'blue', 'green', 'yellow', 'pink', 'purple'];
// array to track colors picked so far
var colorPicked = [];
// variable to track place in array
var colorNumber = 0
// assign a random color to 'shirt'
var shirtColor = colors[Math.floor(Math.random() * colors.length)];
colorPicked[colorNumber] = shirtColor;
document.getElementById('shirt').innerHTML = shirtColor;
document.getElementById('pickedColor').innerHTML = colorPicked[colorNumber];
// assign a random color to 'shorts' - a loop (that doesn't quite work right) checks for duplicates
var shortsColor = colors[Math.floor(Math.random() * colors.length)];
while (shortsColor == colorPicked[i]) {
for (var i = 0; i <= colorNumber; i++) {
document.getElementById('pickedColor').innerHTML = "same";
document.getElementById('shorts').innerHTML = shortsColor;
shortsColor = colors[Math.floor(Math.random() * colors.length)];
}
}
if (shortsColor != colorPicked[colorNumber]) {
document.getElementById('shorts').innerHTML = shortsColor;
colorNumber = colorNumber + 1;
colorPicked[colorNumber] = shortsColor;
}
// assigns a random, non-repeating color to 'hat'
var hatColor = colors[Math.floor(Math.random() * colors.length)];
while (hatColor == colorPicked[i]) {
for (var i = 0; i <= colorNumber; i++) {
document.getElementById('pickedColor').innerHTML = "same";
document.getElementById('hat').innerHTML = hatColor;
hatColor = colors[Math.floor(Math.random() * colors.length)];
}
}
if (hatColor != colorPicked[colorNumber]) {
document.getElementById('hat').innerHTML = hatColor;
colorNumber = colorNumber + 1;
colorPicked[colorNumber] = hatColor;
}
// assigns a random, non-repeating color to 'coat'
var coatColor = colors[Math.floor(Math.random() * colors.length)];
while (coatColor == colorPicked[i]) {
for (var i = 0; i <= colorNumber; i++) {
document.getElementById('pickedColor').innerHTML = "same";
document.getElementById('coat').innerHTML = coatColor;
coatColor = colors[Math.floor(Math.random() * colors.length)];
}
}
if (coatColor != colorPicked[colorNumber]) {
document.getElementById('coat').innerHTML = coatColor;
colorNumber = colorNumber + 1;
colorPicked[colorNumber] = coatColor;
}
// show values in the log
for (var i = 0; i <= colorNumber; i++) {
//document.getElementById('soFar').innerHTML = colorPicked[i];
console.log(colorPicked[i]);
}
</script>
</body>
</html>
https://stackoverflow.com/questions/52939062
复制相似问题