Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 10th, 2003, 09:13 PM
Friend of Wrox
Points: 2,376, Level: 20
Points: 2,376, Level: 20 Points: 2,376, Level: 20 Points: 2,376, Level: 20
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default Changing Text Box Background Color

I am having trouble changing the background color of textboxes with client side javascript, can anyone point me in the right direction.

I have tried
document.all["txtManNo"].Style='background-color: #eeeeee;'
and
frm.txtManNo.Style = 'background-color: #eeeeee;'
with no luck

Any guidance would be much appreciated.

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================
__________________
======================================
"They say, best men are molded out of faults,
And, for the most, become much more the better
For being a little bad."
--Shakespeare
======================================
Reply With Quote
  #2 (permalink)  
Old December 10th, 2003, 09:35 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Must it be JavaScript?

A stylesheet works fine, if not.

<style>
#input_box { background-color:#eeeeee; }
</style>

And then:

<input type="text" id="input_box">

Hope it works with you!;)

Reply With Quote
  #3 (permalink)  
Old December 10th, 2003, 09:39 PM
Friend of Wrox
Points: 2,376, Level: 20
Points: 2,376, Level: 20 Points: 2,376, Level: 20 Points: 2,376, Level: 20
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default

Thanks Snib,
and for the quick reply,
How do I then change it in client side code, so it begins as a grey background then with the onfocus method I wanted to change it to white,

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================
Reply With Quote
  #4 (permalink)  
Old December 10th, 2003, 09:58 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

I've already tried a few different things, all failed.

If you find something, please tell me what it is.

I will let you know if I find a way

Snib

Reply With Quote
  #5 (permalink)  
Old December 10th, 2003, 10:07 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

I see...

I used

document.getElementById("text_box").style.backgrou nd-color="#eeeeee";

and I think JavaScript is confused by the "-" in "background-color."

If you know how to get around this, this way might work.

Snib

Reply With Quote
  #6 (permalink)  
Old December 10th, 2003, 10:10 PM
Friend of Wrox
Points: 2,376, Level: 20
Points: 2,376, Level: 20 Points: 2,376, Level: 20 Points: 2,376, Level: 20
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default

I think you are right, i was trying
document.all.formName.txtTextBoxName.style.backgro und-color = '#eeeeee';
Maybe bgColor, I'll try a few alternatives

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================
Reply With Quote
  #7 (permalink)  
Old December 10th, 2003, 10:57 PM
Friend of Wrox
Points: 2,376, Level: 20
Points: 2,376, Level: 20 Points: 2,376, Level: 20 Points: 2,376, Level: 20
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default

Snib, this seems to work

document.all.form1.txt1.style.background = '#eeeeee';

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================
Reply With Quote
  #8 (permalink)  
Old December 10th, 2003, 10:59 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

That is good to know!

Thanks (even though you asked the question:))

Reply With Quote
  #9 (permalink)  
Old December 10th, 2003, 11:04 PM
Friend of Wrox
Points: 2,376, Level: 20
Points: 2,376, Level: 20 Points: 2,376, Level: 20 Points: 2,376, Level: 20
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
Default

This was the effect I was after
Code:
    <HTML>
       <HEAD>
    <SCRIPT LANGUAGE=JavaScript>
          function changeColor(box)
          {
                document.all.form1.txt1.style.background = '#eeeeee';
                document.all.form1.txt2.style.background = '#eeeeee';
                document.all.form1.txt3.style.background = '#eeeeee';        
                document.all[box].style.background = '#ffffff';    
          }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME=form1>      
           <input onfocus="changeColor('txt1');" name="txt1" style="background-color:#eeeeee" id="txt1" value="Hello" ><br>
           <input onfocus="changeColor('txt2');" name="txt2" style="background-color:#eeeeee" id="txt2" value="Hello" ><br>
           <input onfocus="changeColor('txt3');" name="txt3" style="background-color:#eeeeee" id="txt3" value="Hello" ><br>
    </FORM>
    </BODY>
    </HTML>

======================================
They say, best men are moulded out of faults,
And, for the most, become much more the better
For being a little bad.
======================================
Reply With Quote
  #10 (permalink)  
Old December 11th, 2003, 05:07 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

JavaScript follows a simple rule. If the css style is hyphenated then remove the hyphen and capitalise the following letter so:
[code
document.getElementById("idHere").style.background Color = "#dd0000";
[/code]

A brief look at any basic document would have saved all your agonising...

http://msdn.microsoft.com/library/de...ence_entry.asp



--

Joe
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
background-color: white; covers text smgolden CSS Cascading Style Sheets 6 August 3rd, 2007 12:21 PM
Need to change color of text in a text box? larry HTML Code Clinic 6 December 29th, 2006 05:14 AM
Changing between bold and plain text in a text box funkybuddha Access 2 January 3rd, 2006 10:15 AM
changing a link's text color WalterD Dreamweaver (all versions) 3 February 24th, 2005 05:15 PM
Need help changing color on text, please larry Javascript How-To 1 December 23rd, 2003 10:24 PM



All times are GMT -4. The time now is 10:07 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.