| | |
.style.backgroundColor doesnt work well in IE???
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Feb 2008
Posts: 51
Reputation:
Solved Threads: 0
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
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.
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'; ... .. .
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.
Try this:
javascript Syntax (Toggle Plain Text)
var filled = document.getElementById("one"); filled.style.background = "red";
•
•
Join Date: Feb 2008
Posts: 51
Reputation:
Solved Threads: 0
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?
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?
•
•
Join Date: Nov 2007
Posts: 86
Reputation:
Solved Threads: 6
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
then use this function for your mousedown event.
Sage
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"; } }
Sage
•
•
Join Date: Feb 2008
Posts: 51
Reputation:
Solved Threads: 0
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....
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....
•
•
Join Date: Feb 2008
Posts: 5
Reputation:
Solved Threads: 0
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">
Shortened..
javascript Syntax (Toggle Plain Text)
field2.style.backgroundColor = (field2.checked == 1) ? "red" : "white";
![]() |
Similar Threads
- Another IE6 bug? Or coding mistake? (HTML and CSS)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Disabling toolbar Firefox
- Next Thread: unexpected object
Views: 7908 | Replies: 9
| Thread Tools | Search this Thread |
Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies createrange() css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf






