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

[vedmack]

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

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.

[fert]

Try this:

var filled = document.getElementById("one");
filled.style.background = "red";

[sagedavis]

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

[vedmack]

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?

[sagedavis]

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

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]

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

[vedmack]

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

[zabindia]

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

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

}

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

[fert]

Shortened..

field2.style.backgroundColor = (field2.checked == 1) ? "red" : "white";

[MidiMagic]

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.