数组中的随机项仅返回索引位置，而不是实际值答案

【问题标题】：Random item from array returns only index location, not actual value数组中的随机项仅返回索引位置，而不是实际值
【发布时间】：2018-10-25 13:12:04
【问题描述】：

var borderColors = ["rgb(244, 66, 215)", "rgb(119, 0, 247)", "rgb(0, 65, 247)", "rgb(0, 209, 247)", "rgb(0, 247, 86)", "rgb(205, 247, 0)","rgb(247, 90, 0)"]

var borders = document.querySelectorAll(".borders")

for (var i = 0; i < borders.length; i++) {
    borders[i].addEventListener("mouseover", function() {
    var randomColor = [Math.floor(Math.random() * borderColors.length)]
    console.log(randomColor)
    this.style.borderColor = randomColor
})
}

randomColor 作为数组索引位置返回，但不是数组项的实际值。如果我在 this.style.borderColor 之后用 rgb 值替换 randomColor ，它将改变颜色，但随机值不起作用。提前致谢！

【问题讨论】：

你需要使用随机生成的索引访问数组：this.style.borderColor = borderColors[randomColor]。
var randomColor = borderColors[Math.floor...]; - 您在右侧部分有数组索引括号，您只是忘记将数组放在它前面。

标签： javascript html css arrays mouseover

【解决方案1】：

您需要分配颜色而不是随机索引，为此使用随机生成的索引从数组中调用项目，例如：

this.style.borderColor = borderColors[randomColor];

var borderColors = ["rgb(244, 66, 215)", "rgb(119, 0, 247)", "rgb(0, 65, 247)", "rgb(0, 209, 247)", "rgb(0, 247, 86)", "rgb(205, 247, 0)", "rgb(247, 90, 0)"]

var borders = document.querySelectorAll(".borders")

for (var i = 0; i < borders.length; i++) {
  borders[i].addEventListener("mouseover", function() {
    var randomColor = [Math.floor(Math.random() * borderColors.length)];
    this.style.borderColor = borderColors[randomColor];
  })
}

div.borders {
  height: 45px;
  text-align: center;
  line-height: 43px;
  border: 1px solid #000;
}

<div class="borders">Hover me</div>
<br>
<div class="borders">Hover me</div>
<br>
<div class="borders">Hover me</div>

【讨论】：

不客气，如果您正在寻找答案，请将其标记为 correct answer 以供未来的读者使用。