jsnovice Posted January 12, 2012 Share Posted January 12, 2012 I am trying to change the background color of an input text field. I am attempting to use a function to do this. The function is called by clicking on certain buttons. Is it possible to do what I want, and how can it be done ? I am using Windows 7, Firefox 8 and IE 9. Thank you. Code Author Stephanie Griswold. <html><head><script type="text/javascript">function setOFF() { document.mainForm.Output.value="OFF"; document.mainForm.Output.style="background-color: #ff0000"; }function setON() { document.mainForm.Output.value="ON"; document.mainForm.Output.style="background-color: #00ff00"; }</script></head><body><form name="mainForm"><table><tr><td align="center">Input</td><td>Output</td></tr><tr><td align="center"> <input type="button" value="OFF" onclick="setOFF()"; /> <input type="button" value="ON" onclick="setON()"; /></td><td> <input type="text" size="10" name="Output" value="Output" /></td></tr><tr><td colspan="2"> Below is how I want the Output field to look when OFF or ON buttons are clicked:</td></tr><tr><td colspan="2" align="center"> <input type="text" size="10" name="WhatIWantOff" value="OFF" style="background-color: #ff0000"; /> <input type="text" size="10" name="WhatIWantOn" value="ON" style="background-color: #00ff00"; /></td></tr></table></form></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted January 12, 2012 Share Posted January 12, 2012 You don't use the style object like that. If you want to change the background color, set the document.mainForm.Output.style.backgroundColor property. CSS properties are included in the style object, anything with a hyphen in CSS gets camel-cased in Javascript. What's with the note about the author? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.