Javascript change color of text and background to input value -

i'm going use javascript make function changing color of background, text simultaneously - based on value of text input. i've got background color change, can't manage text working well.

function changebackground() {     // working function changing background color.     document.bgcolor = document.getelementbyid("color").value;      // code i'd use changing text simultaneously - not work.     document.getelementbyid("coltext").style.color = document.getelementbyid("color").value; } 

looking code above, code text document.getelementbyid("coltext").style.color = x works when input actual color, , not "color" value.

this html of i'm referring (i know it's horribly optimized, it's work in progress):

<form id="theform" style="margin-left:396px;">     <input id="color" type="text" onchange="changebackground();" />     <br/><input id="submitcolor" value="submit" type="button" onclick="changebackground();" style="margin-left:48px; margin-top:5px;" /> </form>  <span id="coltext">this text should have same color put in text box</span> 

obviously, , unfortunately, can't use code way. no matter have hard try, beyond this, reach sort of infinite complexity. should sort of easy way resolve this, right?

things seems little confused in code in question, going give example of think try do.

first considerations mixing html, javascript , css:

why using onclick() in html bad practice?

unobtrusive javascript

inline styles vs classes

i removing inline content , splitting these appropriate files.

next, going go "click" event , displose of "change" event, not clear want or need both.

your function changebackground sets both backround color , text color same value (your text not seen), caching color value don't need in dom twice.

css

#theform {     margin-left: 396px; } #submitcolor {     margin-left: 48px;     margin-top: 5px; } 

html

<form id="theform">     <input id="color" type="text" />     <br/>     <input id="submitcolor" value="submit" type="button" /> </form> <span id="coltext">this text should have same color put in text box</span> 

javascript

function changebackground() {     var color = document.getelementbyid("color").value; // cached      // working function changing background color.     document.bgcolor = color;      // code i'd use changing text simultaneously - not work.     document.getelementbyid("coltext").style.color = color; }  document.getelementbyid("submitcolor").addeventlistener("click", changebackground, false); 

on jsfiddle

source: w3schools

color values

css colors defined using hexadecimal (hex) notation combination of red, green, , blue color values (rgb). lowest value can given 1 of light sources 0 (hex 00). highest value 255 (hex ff).

hex values written 3 double digit numbers, starting # sign.

update: pointed out @ian

hex can either 3 or 6 characters long

source: w3c

numerical color values

the format of rgb value in hexadecimal notation ‘#’ followed either 3 or 6 hexadecimal characters. three-digit rgb notation (#rgb) converted six-digit form (#rrggbb) replicating digits, not adding zeros. example, #fb0 expands #ffbb00. ensures white (#ffffff) can specified short notation (#fff) , removes dependencies on color depth of display.

here alternative function check input valid css hex color, set text color or throw alert if not valid.

for regex testing, use pattern

/^#(?:[0-9a-f]{3}){1,2}$/i 

but if regex matching , wanted break numbers groups require different pattern

function changebackground() {     var color = document.getelementbyid("color").value.trim(),         rxvalidhex = /^#(?:[0-9a-f]{3}){1,2}$/i;      if (rxvalidhex.test(color)) {         document.getelementbyid("coltext").style.color = color;     } else {         alert("invalid css hex color");     } }  document.getelementbyid("submitcolor").addeventlistener("click", changebackground, false); 

on jsfiddle

here further modification allow colours name along hex.

function changebackground() {     var names = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgrey", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgrey", "lightgreen", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"],         color = document.getelementbyid("color").value.trim(),         rxvalidhex = /^#(?:[0-9a-f]{3}){1,2}$/i,         formattedname = color.charat(0).touppercase() + color.slice(1).tolowercase();      if (names.indexof(formattedname) !== -1 || rxvalidhex.test(color)) {         document.getelementbyid("coltext").style.color = color;     } else {         alert("invalid css color");     } }  document.getelementbyid("submitcolor").addeventlistener("click", changebackground, false); 

on jsfiddle