随机化 div 中的字体颜色

Question

我正在尝试使我的页面加载时，菜单div 中的字体颜色更改为我的数组中的随机颜色。这是我的代码：

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];
var textToColour = document.getElementsByClassName("menuItem");
function changeColour() {
for (let i = 0; i < textToColour.length; i++) {
textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
console.log("Check");
}
}
window.addEventListener('load', changeColour);

<div class='menuItem'>
item1
</div>
<div class='menuItem'>
item2
</div>
<div class='menuItem'>
item3
</div>

有人看到我哪里出错了吗？

Answer 1

编辑：颜色的格式错误，请看以下内容

var red = 'rgb(0, 100, 63)';
var orange = 'rgb(40, 100, 60)';
var green = 'rgb(75, 100, 40)';
var blue = 'rgb(196, 77, 55)';
var purple = 'rgb(280, 50, 60)';
var letterColors = [red, orange, green, blue, purple];
var textToColour = document.getElementsByClassName("menuItem");
function changeColour() {
for (let i = 0; i < textToColour.length; i++) {
textToColour[i].style.color = letterColors[Math.floor(Math.random() * letterColors.length)];
}
}
window.addEventListener('load', changeColour);

<div class='menuItem'>
Item 1
</div>
<div class='menuItem'>
Item 2
</div>
<div class='menuItem'>
Item 3
</div>

---

const textToColour = document.getElementsByClassName('menuItem');
const letterColors = [
'red',
'blue',
'yellow',
'orange',
];
function changeColour() {
Array.from(textToColour).forEach((x) => {
const randomIndex = Math.floor(Math.random() * letterColors.length);
x.style.color = letterColors[randomIndex];
});
}
window.addEventListener('load', changeColour);

<div class='menuItem'>
Baguette
</div>
<div class='menuItem'>
Petit pain
</div>
<div class='menuItem'>
Croissant
</div>

Answer 2

我认为，您的随机值喜欢htmlcolor格式(#123456(，但某些颜色代码包含字母。也许你会创建随机的字母和数字。

Answer 3

您使用 rgb 颜色，因此请使用'rgb('+...+')'

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];
var textToColour = document.getElementsByClassName("menuItem");
function changeColour() {
for(let i = 0; i < textToColour.length; i++) {
textToColour[i].style.color = 'rgb('+ letterColors[Math.floor(Math.random() *      letterColors.length)]+')';

}
}
window.addEventListener('load', changeColour);

<div class='menuItem'>
try me
</div>

Answer 4

这就是我已将其更改为的，并且工作正常。我犯了为每种颜色添加变量的错误。我实际上是从另一个我认为适用于此功能的代码片段中获取的。

这是功能代码：

var textColors = ["red", "orange", "green", "blue", "purple"];
var textToColour = document.getElementsByClassName("menuItem");
function changeColour() {
for(let i = 0; i < textToColour.length; i++) {
textToColour[i].style.color =  textColors[Math.floor(Math.random() *    letterColors.length)];
console.log("Check");
}
}
window.addEventListener('load', changeColour);

Answer 5

刚刚在现有代码段的颜色代码之前添加了 rgb。这应该:)

var textToColour = document.getElementsByClassName("menuItem");
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = ['rgb('+red+')', 'rgb('+orange+')', 'rgb('+green+')', 'rgb('+blue+')', 'rgb('+purple+')'];
function changeColour() {
for(let i = 0; i < textToColour.length; i++) {
textToColour[i].style.color =  letterColors[Math.floor(Math.random() * letterColors.length)];
}
}
window.addEventListener('load', changeColour);

<div class="menuItem">Item 1</div>
<div class="menuItem">Item 2</div>
<div class="menuItem">Item 3</div>
<div class="menuItem">Item 4</div>
<div class="menuItem">Item 5</div>
<div class="menuItem">Item 6</div>
<div class="menuItem">Item 7</div>
<div class="menuItem">Item 8</div>

Answer 6

使用document.body.addEventListener('DOMContentLoaded', namefunc());等待DOMContentLoaded这是加快页面速度的最佳做法

var arrColor= ['red','blue','green','yellow','purple'];
var el = document.getElementsByClassName("item");
function randColor() {
for(let i = 0; i < el.length; i++) {
el[i].style.color = arrColor[Math.floor(Math.random() * arrColor.length)];
}
}
document.body.addEventListener('DOMContentLoaded', randColor());

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>