Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2018, 04:21
Новичок на форуме
Отправить личное сообщение для Бипач Посмотреть профиль Найти все сообщения от Бипач
 
Регистрация: 11.09.2017
Сообщений: 9

Выбор рандомного элемента из массива для элемента
Есть 3 дива.

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

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

Пыталась вот так:

var colors = [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ];

    var random_color = colors[ Math.floor(Math.random() * colors.length) ];

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


Но ничего. Но если использовать вместо class - id, то работает.

Помогите, пожалуйтса
Ответить с цитированием
  #2 (permalink)  
Старый 10.01.2018, 07:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,110

Сообщение от Бипач
Помогите, пожалуйтса
Ты, для начала, пример тестовый полный сделай...

Цвета рандомные могут повторяться?
Ответить с цитированием
  #3 (permalink)  
Старый 10.01.2018, 14:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,945

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.sq{
		width: 100px;
		height: 100px;
		border: 1px solid grey;
		}
	</style>
</head>
<body>
	<div class="sq">Элемент 1</div>
</body>
<script>
	var colors = [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ];

    document.getElementsByClassName('sq')[0].onclick=e=>e.target.style.backgroundColor = colors[ Math.floor(Math.random() * colors.length)];
    
</script>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2018, 15:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,110

j0hnik, дык
Сообщение от Бипач
Есть 3 дива.
Ответить с цитированием
  #5 (permalink)  
Старый 10.01.2018, 16:02
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,296

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.sq{
			width: 100px;
			height: 100px;
			border: 1px solid grey;
			display:inline-block;
			margin:0 10px;
		}
	</style>
</head>
<body>
	<!-- © j0hnik //-->
	<div class="sq">Элемент 1</div>
	<div class="sq">Элемент 2</div>
	<div class="sq">Элемент 3</div>
	<div>
		<input type="button" value="Какая-то кнопка" id="some_button"/>
	</div>
</body>
<script type="text/javascript">
	var colors = [
        '#f00',
        '#0f0',
        '#00f'
    ];
	
    document.getElementById('some_button').onclick=function(){
		[].forEach.call(document.getElementsByClassName('sq'),function(node){
			node.style.backgroundColor = colors[ Math.floor(Math.random() * colors.length)];
		});
	};
</script>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2018, 16:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,540

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
                body {
                 display: -webkit-flex; 
                 display: flex; 
}
		.sq{
 		width: 100px;
		height: 100px;
		border: 1px solid grey;
		}
	</style>
</head>
<body>
	<div class="sq">Элемент 1</div>
        <div class="sq">Элемент 2</div>
        <div class="sq">Элемент 3</div>
</body>
<script>
	var colors = [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ];

    document.getElementsByTagName('body')[0].onclick=e=>e.target.style.backgroundColor = colors[ Math.floor(Math.random() * colors.length)];
    
</script>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 10.01.2018, 16:12
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,296

Dilettante_Pro, в вашем примере кнопки недостает
Сообщение от Бипач
при клике на какую-то кнопку
Ответить с цитированием
  #8 (permalink)  
Старый 10.01.2018, 16:29
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,540

Nexus,
независимый вариант - для разнообразия
Ответить с цитированием
  #9 (permalink)  
Старый 10.01.2018, 22:14
Новичок на форуме
Отправить личное сообщение для Бипач Посмотреть профиль Найти все сообщения от Бипач
 
Регистрация: 11.09.2017
Сообщений: 9

Спасибо, уже нашла решение)

<p id="mini"></p>

<div class="flex">

    <div class="shape square"></div>

    <div class="shape circle"></div>

    <div class="shape oval"></div>

</div>

<div id="foo"> Click</div>


$("#foo").click(function () {
        var colors = [
            'green',
            'red',
            'blue'
        ];

        var divs = [
            'square',
            'circle',
            'oval'
        ];

        function compareRandom() {
            return Math.random() - 0.5;
        }

        colors.sort(compareRandom);

        divs.sort(compareRandom);

        document.getElementsByClassName(divs[0])[0].style.backgroundColor = colors[0];
        document.getElementsByClassName(divs[1])[0].style.backgroundColor = colors[1];
        document.getElementsByClassName(divs[2])[0].style.backgroundColor = colors[2];

        var r_class = divs[Math.floor(Math.random() * divs.length)];

        var r_color = colors[Math.floor(Math.random() * colors.length)];

        document.getElementById("mini").innerHTML = "Select " + document.getElementsByClassName(r_class)[0].style.backgroundColor + " " + r_class;

        document.getElementById("mini").style.color = r_color;

        $(".shape").click(function () {
            if (this.style.backgroundColor == document.getElementsByClassName(r_class)[0].style.backgroundColor && ) {
                alert("yep");
            } else {
                alert("no");
            }
        })
    });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по clientWidth для элемента body shurik_shink Элементы интерфейса 1 04.05.2016 19:50
Выбор ближайшего элемента вверх по коду OnArs Общие вопросы Javascript 6 14.10.2013 15:02
Оптимальный выбор браузера для интранет-сайта frid-karatel Javascript под браузер 12 29.12.2009 09:19
эмуляция события click для элемента select Polo Events/DOM/Window 4 16.12.2009 12:29
Можно ли как для произвольного массива создавать вызовы функций , имеющих на входе kefi Общие вопросы Javascript 3 17.04.2009 15:53