Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 16919

Feb 27th, 2008

.style.backgroundColor doesnt work well in IE???

Expand Post »

Hi i have a form which holds several Inputs of type text, now when im clicking on a check box it run a js script which gets each Input text element and colors its background with a color
something like this

javascript Syntax (Toggle Plain Text)
            var filed=document.getElementById("one");
            filed.style.backgroundColor='red';
            filed=document.getElementById("two");
            filed.style.backgroundColor='red';
...
..
.
            var filed=document.getElementById("one");
            filed.style.backgroundColor='red';
            filed=document.getElementById("two");
            filed.style.backgroundColor='red';
...
..
.

This works 100% in FF, but in IE its does nothing until i click on on the the input text, and than all of them turns red....

Any one knows what can be done in this situation?

Thanks ahead.

Daniel.

Similar Threads

Another IE6 bug? Or coding mistake? in HTML and CSS

vedmack

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

59 posts
since Feb 2008

Permalink

Feb 27th, 2008

Re: .style.backgroundColor doesnt work well in IE???

Try this:

javascript Syntax (Toggle Plain Text)
var filled = document.getElementById("one");
filled.style.background = "red";
var filled = document.getElementById("one");
filled.style.background = "red";

fert

Reputation Points: 16

Solved Threads: 1

Newbie Poster

Offline

9 posts
since Feb 2008

Permalink

Feb 27th, 2008

Re: .style.backgroundColor doesnt work well in IE???

yeah, try using double quotes instead of single around the color...

if that doesn't work...
on line 3 and 4 call it filed2

Sage

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Feb 28th, 2008

Re: .style.backgroundColor doesnt work well in IE???

thx 4 the respond...
But it still doesn't work :/ its acts the same as before... and i noticed that after i click on the check box i can click anywhere on the page and only than the color of the input box changes... i even tried doing it with a single input box... same as doing it with several inputs...
And on FF it works perfect....
I tested with double quotes and single quotes, i tried .style.backgroundColor and i tried .style.background and it works well only on FF...

Any ideas left?

Thanks again....
Any other ideas?

vedmack

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

59 posts
since Feb 2008

Permalink

Feb 28th, 2008

Re: .style.backgroundColor doesnt work well in IE???

this sounds like the way IE is handling your script.

Which event are you using as your trigger?
A lot of this works better by using prototype or mootools as these libraries have all of the workarounds set in place so that you don't have to worry so much about the different browsers.

I recommend learning about event.observe instead of using onclick events or onblur events within the html tag itself.

This will allow for smoother work. That and, instead of typing out document.getelementbyid("hello") all you have to type with prototype or mootools is $('hello')..

that said, IE is a little buggy when it comes to onclick events and checkboxes... It does like onfocus and onblur.

I recommend trying changing onclick to onmousedown instead to trigger the function and see if that fixes your problem. It sounds like the event is being triggered just not the way that you want it to.

Another question is, what happens when they uncheck the box (if a mistake was made). You then should change the color back to it's default state, so, you should actually do something more like

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function changebg(){
var filed=document.getElementById("one"); 
if (filed.checked =="true"){
filed.style.backgroundColor = "red";
}  else {
filed.style.backgroundColor = "white";
}  
}
function changebg(){
var filed=document.getElementById("one"); 
if (filed.checked =="true"){
filed.style.backgroundColor = "red";
}  else {
filed.style.backgroundColor = "white";
}  
}

then use this function for your mousedown event.
Sage

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Feb 28th, 2008

Re: .style.backgroundColor doesnt work well in IE???

IE also might not like the "" around your id in getElementById I'm not sure though
Sage

sagedavis

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

86 posts
since Nov 2007

Permalink

Feb 28th, 2008

Re: .style.backgroundColor doesnt work well in IE???

Thanks allot sagedavis!
I did changed to onmousedown as you said , and now it works on IE too....

p.s
of course my js script is more than that i posted. i do have if/else... i did it from the first time cause i wanted to color the inputs in gray so when I'm changing input to read only it will look like its disabled in FF.. so i manually imitated it in IE with coloring.... (.disabled property was bad 4 me)

Solved....

vedmack

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

59 posts
since Feb 2008

Permalink

Feb 28th, 2008

Re: .style.backgroundColor doesnt work well in IE???

Try this...it works both in IE & FF..with onClick as mouseEvent

(Toggle Plain Text)

function changeBgColor(){
  			var field=document.getElementById("one"); 
			var field2=document.getElementById("firstname"); 

			if (field.checked == 1)
				field2.style.backgroundColor="red";
				else 
				field2.style.backgroundColor="white";

}

(Toggle Plain Text)

	<input type="checkbox" id="one" onClick="changeBgColor()">
	<input type="text" id="firstname">

zabindia

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Feb 2008

Permalink

Feb 29th, 2008

Re: .style.backgroundColor doesnt work well in IE???

Shortened..

javascript Syntax (Toggle Plain Text)
field2.style.backgroundColor = (field2.checked == 1) ? "red" : "white";
field2.style.backgroundColor = (field2.checked == 1) ? "red" : "white";

fert

Reputation Points: 16

Solved Threads: 1

Newbie Poster

Offline

9 posts
since Feb 2008

Permalink

Mar 1st, 2008

Re: .style.backgroundColor doesnt work well in IE???

I had this trouble.

The problem is that IE does not update the screen until there are no scripts running.

So you need to temporarily end the script, and use setInterval to start another function after a short pause.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Disabling toolbar Firefox

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: unexpected object

DaniWeb Message

Cancel Changes

User Name
Password