In one of my applications, I had to toggle the background of a box between two colors, say blue and red.
As I like to store an information in only one place, I decided that this place would be the box itself and that I would check the current color and set the other.
As the result did not meet my expectations, I wrote a little test page, including the following javascript code:
var red = 'rgb(255,1,2)';
var blue = 'rgb(1,2,255)';
document.getElementById(id).style.backgroundColor = blue;
if (document.getElementById(id).style.backgroundColor == blue)
document.getElementById(id).style.backgroundColor = red;
else
document.getElementById(id).style.backgroundColor = blue;
and lo and behold: the box was blue with Firefox and red with IE!
I sent my test page to Mozilla and they answered this problem was already on their buglist.
This was two years ago. I recently checked again : it has become a feature ! Not only is it still in Firefox 27.0.1, but it has appeared in IE 11.0.3 !
If you want to see by yourself, here is the full test page :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Blue or red</title>
<style>
#smartbox {
width: 150px;
font: bold 16pt verdana;
text-align: center;
padding: 30px 0px;
color: white;
}
</style>
<script type="text/javascript">
function showbox()
{
var id = 'smartbox';
var red = 'rgb(255,0,0)';
var blue = 'rgb(0,0,255)';
document.getElementById(id).style.backgroundColor = blue;
// blue = document.getElementById(id).style.backgroundColor;
if (document.getElementById(id).style.backgroundColor == blue)
document.getElementById(id).style.backgroundColor = red;
else
document.getElementById(id).style.backgroundColor = blue;
}
</script>
</head>
<body onload="showbox();">
Blue or red ?<br>
<br>
This box should be <b style="color: red">RED</b>, why not ?<br>
<br>
<div id="smartbox">SMART BOX</div>
</body>
</html>
But why doesn't it work as expected ?
After some time of fruitless investigation, I suspected that in this case getElementById did not return what it was fed, and, indeed, unexpected formatting occurs: spaces appear after the commas in the rgb list.
I thought that this 'feature' could well change unexpectedly again in the future, disrupting any code using it. So, was I to give up my "brilliant" first idea and add an independent flag ? No! I found a nice workaround : instead of using my color as written, let the browser make an initial conversion to its own syntax.
Please uncomment the line:
// blue = document.getElementById(id).style.backgroundColor;
and try again !
