Why does this code work in Firefox but not in IE9?
// turn on the 'image file upload' field and its label
document.getElementById('itemImageId').disabled = false;
document.getElementById('labelForImageUploadID').style.color = "black";
Here is the HTML with the label and the file input:
<label for="itemImageId" style="color: silver" id="labelForImageUploadID">Item image
(select to change the item's current image)</label>
<input type="file" size="100px" id="itemImageId" disabled="disabled"
name="theFileUpload"></input>
** EDIT ** The above label and file upload tags are nested inside the following div -- I added this so you can see how the mouse click is handled. The handleRowClick() function has the above Javascript code that tries to turn the text black:
<div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);"
onmouseover="handleMouseOver(this);" onmouseout="handleMouseOut(this);"
ondblclick="handleDblClick(this);">
When the label first appears on the page, its color is correct -- it is silver due to the inline color style.
The Javascript code executes on a mouse click.
In Firefox, the code turns the label text to black, and enables the file upload control.
However in IE9 the label's text stays gray.
Does IE9 not support style.color = "somecolor" to dynamically control colors of the label tag?
I've looked at a few other posts, and the only quirk I found was that if you have enabling/disabling happening dynamically, to make sure the tag is ENABLED in IE9 before you try to change its color.
It's not just this one label tag either -- all the label tags on the page fail to turn black but ONLY in IE9 -- in FF everything works.
Is there a 'gotcha' or a trick I'm missing?