Jump to content

Changing Background Color Of Input Text Field

Recommended Posts

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>
  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...