|
 |
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 .
|
 |
|
|
 |

December 10th, 2003, 09:13 PM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
|
|
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
======================================
|

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
|
|
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!;)
|

December 10th, 2003, 09:39 PM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
|
|
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.
======================================
|

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
|
|
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
|

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
|
|
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
|

December 10th, 2003, 10:10 PM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
|
|
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.
======================================
|

December 10th, 2003, 10:57 PM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
|
|
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.
======================================
|

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
|
|
That is good to know!
Thanks (even though you asked the question:))
|

December 10th, 2003, 11:04 PM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Location: , , Australia.
Posts: 596
Thanks: 1
Thanked 3 Times in 3 Posts
|
|
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.
======================================
|

December 11th, 2003, 05:07 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
|
|
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
|
Thread Tools |
Search this Thread |
|
|
Display Modes |
Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
 |