Случайный элемент из массива возвращает только местоположение индекса, а не фактическое значение - PullRequest
Новая
       7

Случайный элемент из массива возвращает только местоположение индекса, а не фактическое значение

0 голосов
/ 25 октября 2018 
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 возвращается как местоположение индекса массива, но не фактическое значение элемента массива.Если я заменю randomColor значением rgb после this.style.borderColor, он изменит цвет, но рандомизированное значение не работает.Заранее спасибо!

1 Ответ

0 голосов
/ 25 октября 2018

Вам нужно назначить цвет, а не случайный индекс, для этого вызовите элемент из массива, используя случайно сгенерированный индекс, например: 

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