Выбрать рандомный цвет из массива для элемента

256
11 января 2018, 20:08

Есть 3 элемента: квадрат, круг и треугольник.

Есть массив с тремя цветами. Допустим, красный, синий и зеленый.

Моя проблема в том, что я не могу понять как при клике на какую-то кнопку каждый из этих трёх элементов приобрел рандомное значение из этого массива. Т.е. изменил бэкграунд.

Я накалякала вот это (правда, без массива, и не совсем то, что надо, но это всё, что мне удалось сделать):

<div id="foo"> foo </div>
$(document).ready(function() {
    function random() {
        return Math.round(Math.random());
    }
    function getRandomColor() {
        return random() ? "grey" : "black";
    }
    function changeColor (a, id) {
        document.getElementById(id).style.background = getRandomColor();
        setTimeout(function () {
            changeColor(a, id)
        }, a);
    }
    changeColor(1000, "foo");
});

А так то вот нужные три элемента:

<div class="sq shape"></div>
<div class="ci shape"></div>
<div class="tr shape"></div>

И еще я пробовала вот так:

var colors = [
    '#ff0000',
    '#00ff00',
    '#0000ff'
];
var random_color = colors[ Math.floor(Math.random() * colors.length) ];
document.getElementsByClassName('sq')[0].style.backgroundcolor =random_color;

Но тоже не работает.

Пожалуйста, помогите решить эту "задачу"

И так, задача решена)

Если кому интересно решение: https://jsfiddle.net/ho95g48r/

Answer 1

Это можно легко сделать с использованием jQuery:

1) Сначала берём список элементов селектором jQuery:

$('.shape')

2) Затем проходим по каждому элементу функцией .each:

$('.shape').each( function (index) { ... }  );

4) Затем добавляем нужные CSS поля, классы. Например, можно определить массив имён классов, выбрать один случайным образом и использовать функцию .addClass():

// список CSS классов с нужными параметрами
names = [ ... ];
// выбираем случайный элемент массива
var current = names[Math.floor(Math.random() * names.length)];
// добавляем его какому-нибудь объекту
$( ... ).addClass( current );

Итоговый код:

// список CSS классов с нужными параметрамиписок классов
names = ['myred', 'light-blue'];
// цикл по всем элементам какого-нибудь класса
$('.shape').each( function (index) {
    // добавить класс случайным образом
    $( this ).addClass( names[Math.floor(Math.random() * names.length)] );
});

Вместо установки класса можно ставить любые другие значения. Например, хранить в списке разные цвета и ставить их функцией .css()

Update 1. Рабочий пример повторяющихся значений

$(document).ready(function() { 
    // список CSS классов с нужными параметрамиписок классов 
    var names = ["blue", "yellow", "red", "green"]; 
 
    function update () { 
        // очистить ранее добавленные классы 
        $( ".shape" ).removeClass( "blue yellow red green" ); 
 
        // циклически добавить случайный класс 
        $('.shape').each( function(index) { 
            $( this ).addClass( names [Math.floor(Math.random() * names.length)] ); 
        }); 
    } 
 
    // вызывать функцию каждые 0.5 сек 
    setInterval(update, 500); 
});
.shape { 
  display: inline-block;   
  width: 64px; 
  height: 64px; 
  border: 1px solid red; 
} 
 
/* классы, которые будут случайно добавляться */ 
.blue { 
    background: blue; 
} 
.yellow { 
    background: yellow; 
} 
.red { 
    background: red; 
} 
.green { 
    background: green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- изначально одинаково пустые объекты --> 
<div class="shape"></div> 
<div class="shape"></div> 
<div class="shape"></div> 
<div class="shape"></div>

Update 2. Рабочий пример НЕ повторяющихся значений

Для этого нам нужно всего лишь случайным образом отсортировать массив имён и брать значения уже последовательно.

// перемешивает массив случайным образом 
function shuffle(array) { 
    var currentIndex = array.length, temporaryValue, randomIndex; 
    while (0 !== currentIndex) { 
        randomIndex = Math.floor(Math.random() * currentIndex); 
        currentIndex -= 1; 
        temporaryValue = array[currentIndex]; 
        array[currentIndex] = array[randomIndex]; 
        array[randomIndex] = temporaryValue; 
    } 
    return array; 
} 
 
$(document).ready(function() { 
    // список CSS классов с нужными параметрамиписок классов 
    var names = ["blue", "yellow", "red", "green"]; 
 
    function update () { 
        // очистить ранее добавленные классы 
        $( ".shape" ).removeClass( "blue yellow red green" ); 
 
        // перемешать цвета 
        var shuffled_names = shuffle(names); 
 
        // циклически добавить элемента массива как класс 
        $('.shape').each( function(index) { 
            // остаток от деления позволяет проходиться по списку циклически 
            // на случай, если число div'в больше числа элементов массива 
            $( this ).addClass( shuffled_names [index % names.length] ); 
        }); 
    } 
 
    // вызывать функцию каждые 0.5 сек 
    setInterval(update, 500); 
});
.shape { 
  display: inline-block;   
  width: 64px; 
  height: 64px; 
  border: 1px solid red; 
} 
 
/* классы, которые будут случайно добавляться */ 
.blue { 
    background: blue; 
} 
.yellow { 
    background: yellow; 
} 
.red { 
    background: red; 
} 
.green { 
    background: green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- изначально одинаково пустые объекты --> 
<div class="shape"></div> 
<div class="shape"></div> 
<div class="shape"></div> 
<div class="shape"></div> 
<!-- проверка, что алгоритм корректно работает на числе div'ов большем количества классов --> 
<!-- <div class="shape"></div> -->

Answer 2

У вас опечатка в backgroundcolor - составные имена css свойств пишутся в js в camelCase. Должно быть так:

document.getElementsByClassName('sq')[0].style.backgroundColor = random_color;


var colors = [ 
  '#ff0000', 
  '#00ff00', 
  '#0000ff' 
]; 
 
console.log(colors[Math.floor(Math.random() * colors.length)]); 
 
var random_color = colors[Math.floor(Math.random() * colors.length)]; 
 
document.getElementsByClassName('sq')[0].style.backgroundColor = random_color;
<div class="sq shape">1</div> 
<div class="ci shape">2</div> 
<div class="tr shape">3</div>

READ ALSO
Фон для параллакса
CSS

Фон для параллакса

Всем привет!

 208
Не работает кнопка вверх
CSS

Не работает кнопка вверх

Помогите разобраться, есть сайт, на нем не работает кнопка вверх

 184
Качество картинки
CSS

Качество картинки

Есть картинка 320x200Я размещаю ее в блоке шириной 260 пикселей, высота картинки уменьшается пропорционально до 162,5, но экран не может отображать...

 239
Html css готовые компоненты
CSS

Html css готовые компоненты

Должен реализовать сайт небольшой, ищу библиотеку кнопок и всех других компонентов реализованных на css и htmlТипо зашел выбрал компонент с дизайном...

 303