Background Color Input

**ecarter202** · 07-04-2012, 07:06 PM

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>

**chrisranjana** · 07-04-2012, 10:40 PM

Try

Code:

<script type="text/javaScript">

and also find a way for passing the input value (color) to the function.

**ecarter202** · 07-05-2012, 10:52 AM

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!

**Padonak** · 07-05-2012, 04:34 PM

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>