...

View Full Version : Randomly generated colors



the6ness
09-28-2011, 02:55 AM
Alright so for a school assignment I need to create a button with the name of the color it is going to turn the background to.
the assignment says nothing about naming the buttons the hex numbers for the color therefore:

I was curious if someone could show me how to create a button in java script that would generate a random hex number for a color ie: #+()+()+()+()+()+()
and the text shown on the button would be the same as the hex number generated.

feed back please

Old Pedant
09-28-2011, 03:30 AM
Well, no. We don't do homework. (It's a rule of this forum. See rule 1.6 here: http://www.codingforums.com/rules.htm )

But since you are going beyond the original assignment, if you show me your code that works with *named* colors, then I'll show you how to generate the random hex color number.

the6ness
09-28-2011, 03:39 AM
nono I can understand that I know how to do the assignment
and I've completed it, its a beginner course but I've never touched on javascript so I would like to go above and beyond the assignment, its more for furthering myself and I'm not going to lie I want to wow the teacher haha xP
I don't copy and paste so do any method of showing me you would like
but this is what I have down its just simple stuff



<html>

<head>

<title>New Page 1</title>


<script language="Javascript">

function newcolor(aColor)
{
document.bgColor=aColor;
}
</script>

</head>

<body>

<div align="left">
<form>
<input type="button" value="RED"
onclick="newcolor('red');">
</form>
</div>

</body>

</html>

Old Pedant
09-28-2011, 04:03 AM
Happiness. You did all I asked for.

So:

Generating the hex number is easy:


function genHexColor()
{
var color = "#";
for ( var n = 1; n <= 6; ++n )
{
color += ( Math.floor( 16 * Math.random() ) ).toString(16);
}
}

How it works:

Math.random() returns a number that is >= 0 and < 1.0000
Multiply that by 16 and you get a number than is >= 0 and < 16.0000 (so <= 15.9999999999)
Take the "floor" of that and you essentially chop off everything after the decimal point,
So now you have an integer from 0 to 15.
toString(16) says "convert that number to a string in base 16 notation". In other words, convert it to hex.

So we just pick a random hex digit 6 times and the result will be something like #37A0F8 or whatever.

************

NOW comes the tricky part... Using that as both the text of the button *and* the argument to the function.

Turns out, that's easier than you think.



<script type="text/javascript">
document.write('<input type="button" value="' + genHexColor() + '" onclick="newcolor(\'this.value\');"/>');
</script>


See it? Let js create the entire button for you. And then rather than have to duplicate the hex color, just get the value *of* the button and pass it to your onclick function.

You'll have a button that looks something like


<input type="button" value="#7381AF" onclick="newcolor('this.value');"/>

Old Pedant
09-28-2011, 04:12 AM
Another way to do this, that the "purists" would like better.


<html>
<head>
<title>New Page 1</title>
<script type="text/javascript">
function initialize( )
{
var form = document.forms[0];
var color = "#";
for ( var n = 1; n <= 6; ++n )
{
color += ( Math.floor( 16 * Math.random() ) ).toString(16);
}
form.colorPicker.value = color;
form.colorPicker.onclick =
function() { document.body.style.backgroundColor = this.value; };
}
window.onload = initialize;
</script>
</head>
<body>
<div align="left">
<form>
<input name="colorPicker" type="button" value="" />
</form>
</div>
</body>
</html>

Note that <script language="javascript"> is obsolete. See what I used, instead.
Note that the bgColor attribute is obsolete, too.

Old Pedant
09-28-2011, 04:12 AM
And just for fun...one more variant:


<html>
<head>
<title>New Page 1</title>
<script type="text/javascript">
function initialize( )
{
var form = document.forms[0];
var buttons = form.getElementsByTagName("input");
for ( var b = 0; b < buttons.length; ++b )
{
var button = buttons[b];
var color = "#";
for ( var n = 1; n <= 6; ++n )
{
color += ( Math.floor( 16 * Math.random() ) ).toString(16);
}
button.value = color;
button.onclick =
function() { document.body.style.backgroundColor = this.value; };
}
}
window.onload = initialize;
</script>
</head>
<body>
<div align="left">
<form>
<input type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
<input type="button" value="" />
</form>
</div>
</body>
</html>

the6ness
09-28-2011, 04:13 AM
wow it surprises me its that simple
and thank you for the math.floor tid bit I've been using math.round
I really appreciate your help!

now I'm just going to try and have fun with this
could you show me how to add an onclick function that would create another button with the same properties as the original except a different hex number?

Old Pedant
09-28-2011, 04:34 AM
could you show me how to add an onclick function that would create another button with the same properties as the original except a different hex number?

Don't want much, do you? <grin/>


<html>
<head>
<title>New Page 1</title>
<script type="text/javascript">
function genHexColor()
{
var color = "#";
for ( var n = 1; n <= 6; ++n )
{
color += ( Math.floor( 16 * Math.random() ) ).toString(16);
}
return color;
}
function buttonFun(btn)
{
document.body.style.backgroundColor = btn.value;

var newbtn = document.createElement("input");
newbtn.type = "button";
newbtn.value = genHexColor();
newbtn.onclick = function() { buttonFun(this); };
document.forms[0].appendChild(newbtn);
}
function initialize( )
{
var button = document.forms[0].b1;
button.value = genHexColor();
button.onclick = function() { buttonFun(this); };
}
window.onload = initialize;
</script>
</head>
<body>
<form>
<input name="b1" type="button" value="" />
</form>
</body>
</html>

the6ness
09-28-2011, 04:35 AM
Don't want much, do you? <grin/>


<html>
<head>
<title>New Page 1</title>
<script type="text/javascript">
function genHexColor()
{
var color = "#";
for ( var n = 1; n <= 6; ++n )
{
color += ( Math.floor( 16 * Math.random() ) ).toString(16);
}
return color;
}
function buttonFun(btn)
{
document.body.style.backgroundColor = btn.value;

var newbtn = document.createElement("input");
newbtn.type = "button";
newbtn.value = genHexColor();
newbtn.onclick = function() { buttonFun(this); };
document.forms[0].appendChild(newbtn);
}
function initialize( )
{
var button = document.forms[0].b1;
button.value = genHexColor();
button.onclick = function() { buttonFun(this); };
}
window.onload = initialize;
</script>
</head>
<body>
<form>
<input name="b1" type="button" value="" />
</form>
</body>
</html>


:O...... I'm a newbie when it comes to java take pity on me oh god xP

Old Pedant
09-28-2011, 04:38 AM
and thank you for the math.floor tid bit I've been using math.round

Math.round will give either bogus results or wrong results.

If you used

Math.round( 16 * Math.random() )

then you will end up with numbers for 0 to 16!!! (Because 15.5 and above rounds to 16.)

And when you try to convert 16 to hex, you get "10", of course.

On the other hand, if you used

Math.round( 15 * Math.random() )

you will get numbers from 0 to 15, true, but they will be incorrectly distributed.

Specifically, 0 and 15 will appear only half as often as 1 through 14.

That's because only 0 through 0.49999 rounds to 0, and only 14.5 through 14.99999 rounds to 15. A range of 0.5 units in each case. Whereas, for example, 2.50000 through 3.49999 rounds to 3, a range of 1 full unit.

It's just algebra. <grin/>

Old Pedant
09-28-2011, 04:40 AM
:O...... I'm a newbie when it comes to java

Ummm...I think you mean you are a newbie when it comes to javaSCRIPT?

Java is an entirely different (and much harder) language. About the only thing they have in common are the first 4 letters of their names.


*********

And hey, you asked!

the6ness
09-28-2011, 11:39 PM
Ummm...I think you mean you are a newbie when it comes to javaSCRIPT?


I could have sworn I put script my bad haha xP thanks again! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum