Рандомный цвет в переменной

samec1337 · October 21, 2015

Приветствую!

Имеется код, в котором переменная "t" содержит случайный цвет.

Как сделать, чтобы при нажатии на кнопку, div заливался случайным цветом?

<html><head>	<meta charset="utf-8">    <style>    #box {        width: 25px;        height: 25px;        border: 1px solid black;        margin: 20px;    }     </style></head><body>    <input type="button" onclick="randomColor()" value="ЖМИ">    <div id="box"></div>    <script>    function randomColor() {    document.getElementById("box").style.backgroundColor = "red";     var t = '#' + (Math.round(Math.random(99999999, 1) * 99999999)).toString(16).substr(1);}    </script></body></html>

(В примере указал заданный цвет "red". С ним работает).

wwt · October 23, 2015

с еще одной проблемой столкнулся. в той же строке "document.getElementById('box').style.backgroundColor = t;" не работает доступ к div кроме Id. Ни name, ни class, ни tagName и тд.

document.getElementsByTagName('div')[0];//по тегу вернет первый найденный divdocument.querySelector('div');//по тегу вернет первый найденный divdocument.querySelector('.mydiv');//по классу вернет первый найденный элемент с классом .mydivdocument.querySelector('[name="mydiv"]'); //по name вернет первый найденный элемент с этим именем

Вообще querySelector() принимает любые валидные селекторы. В старых версиях браузеров не работает.

wwt · October 22, 2015

(Math.round(Math.random(99999999, 1) * 99999999)).toString(16).substr(1);

не всегда выдаст 6-ти значную строку. Поэтому если значение цвета некорректно блок будет заливаться красным согласно первой строки в функции.

Лучше генерируйте цвет в rgb

rgb(255,255,255)

три раза от 0 до 255 и точно не будет ошибок.

samec1337 · October 22, 2015

(Math.round(Math.random(99999999, 1) * 99999999)).toString(16).substr(1);
не всегда выдаст 6-ти значную строку. Поэтому значение цвета некорректно блок будет заливаться красным согласно первой строки в функции.

Лучше генерируйте цвет в rgb
rgb(255,255,255)
три раза от 0 до 255 и точно не будет ошибок.

переписал - не работает)

мне кажется проблема в строке "document.getElementById("box").style.backgroundColor = t;"

<html><head>	<meta charset="utf-8">    <style>    #box {        width: 25px;        height: 25px;        border: 1px solid black;        margin: 20px;    }    </style></head><body>    <input type="button" onclick="randomColor()" value="ЖМИ">    <div id="box"></div>    <script>    function randomColor() {    document.getElementById("box").style.backgroundColor = t;    var t = 'rgb(' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' +      (Math.round(Math.random(255, 0) * 255)).toString(10) + ')';}    </script></body></html>

wwt · October 22, 2015

1. сначала объявите функцию, а потом обращайтесь к ней

2. присвоение значения должно быть после того как объявлена переменная t

<html><head>	<meta charset="utf-8">    <style>    #box {        width: 25px;        height: 25px;        border: 1px solid black;        margin: 20px;    }    </style><script>    function randomColor() {        var t = 'rgb(' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' +      (Math.round(Math.random(255, 0) * 255)).toString(10) + ')';}document.getElementById("box").style.backgroundColor = t;    </script></head><body>    <input type="button" onclick="randomColor()" value="ЖМИ">    <div id="box"></div>    </body></html>

samec1337 · October 22, 2015

1. сначала объявите функцию, а потом обращайтесь к ней

2. присвоение значения должно быть после того как объявлена переменная t

<html><head>	<meta charset="utf-8">    <style>    #box {        width: 25px;        height: 25px;        border: 1px solid black;        margin: 20px;    }    </style><script>    function randomColor() {        var t = 'rgb(' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' +      (Math.round(Math.random(255, 0) * 255)).toString(10) + ')';}document.getElementById("box").style.backgroundColor = t;    </script></head><body>    <input type="button" onclick="randomColor()" value="ЖМИ">    <div id="box"></div>    </body></html>

спасибо! все работает

PS еще надо было "document.getElementById("box").style.backgroundColor = t;" в функцию засунуть

Great Rash · October 22, 2015

http://www.paulirish.com/2009/random-hex-color-code-snippets/

Особенно последняя версия рандома впечатляет.

Ещё 16-ричный "матан" от StackOverflow:

'#' + (Math.random() * 0xFFFFFF << 0).toString(16);

wwt · October 22, 2015

PS еще надо было "document.getElementById("box").style.backgroundColor = t;" в функцию засунуть

да надо было, это я когда сверху переносил промазал мимо скобки и не заметил )) + за внимательность.

samec1337 · October 22, 2015

PS еще надо было "document.getElementById("box").style.backgroundColor = t;" в функцию засунуть

да надо было, это я когда сверху переносил промазал мимо скобки и не заметил )) + за внимательность.

с еще одной проблемой столкнулся. в той же строке "document.getElementById('box').style.backgroundColor = t;" не работает доступ к div кроме Id. Ни name, ни class, ни tagName и тд.

В гугле инфы не нашел.

<html><head>	<meta charset="utf-8">    <style>    div {        width: 125px;        height: 125px;        border: 1px solid black;        margin: 20px;    }    </style><script>    function randomColor() {    var t = 'rgb(' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' + (Math.round(Math.random(255, 0) * 255)).toString(10) + ',' +      (Math.round(Math.random(255, 0) * 255)).toString(10) + ')';      document.getElementsByClassName("box1").style.backgroundColor = t;}    </script></head><body>    <input type="button" onclick="randomColor()" value="ЖМИ">    <div class="box1"></div></body></html>

Edited October 22, 2015 by samec1337

Jack_V · October 23, 2015

Первый запрос в гугле по "get document class".

Sign In

Рандомный цвет в переменной

Question

samec1337

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

samec1337

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

samec1337

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

samec1337

Link to comment

Share on other sites

Jack_V

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information