Background Color Input

Printable View

07-04-2012, 07:06 PM
ecarter202

Background Color Input

Trying to write something where, after you have entered in a hex color, and clicked the "change color" button, it changes your background color to 'x' hex color.

Thanks, i'm a noob!

<html>
<head>
<title>This is a test-site</title>
<script type="JavaScript">
function colorchange()
{
document.bgColor = color;
}
</script>
</head>
<body bgcolor="#708090">
<form align="center">
HEX Color: <input type="test" name="color" id="color" value="" />
</form>
<button type="button" onclick="javascript:colorchange('')">Change Color</button>
</body>
07-04-2012, 10:40 PM
chrisranjana

Try

Code:

<script type="text/javaScript">

and also find a way for passing the input value (color) to the function.
07-05-2012, 10:52 AM
ecarter202

yes...

I originally had <text/javascript> and it didn't work. I have been trying to figure how to connect the input value to "color". I suppose I should have made myself more clear by asking how to do that directly.

Thank you!
07-05-2012, 04:34 PM
Padonak

Code:

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>...</title> <style type="text/css"> body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#000;color:#fff;padding:0px;margin:300px 0px 0px 0px;} b{font-size:16px;font-style:italic;} input{margin-left:15px;} #bgcol{text-align:center;font-style:italic;} </style> <script type="text/javascript"> var path=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/g; function col(obj){ var val=obj.value; if(path.test(val)){document.body.style.backgroundColor='#'+val;} } window.onload=function(){document.getElementById('bgcol').onkeyup=function(){col(this);}} </script> </head> <body> <b>#</b><input type="text" id="bgcol" size="25" maxlength="6" /> </body> </html>
07-05-2012, 04:51 PM
ecarter202

but...

Is there a way with the code I provided? A way to connect the value entered to the executed function? An explanation would be great.

thank you!