simple function not working in FF

[julian_m]

Incredibly, this function works as expected in IE (changing the
div_id's color after every click) , whereas it only changes div_id's
color once
function colorDiv(div_id)
{
if (document.getElementById(div_id).style.backgroundC olor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundCo lor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundCo lor = '#00cc00';
}

}

I call the above function this way:

<div id="div_1" onclick="colorDiv('div_1'); return false;" >
<div id="div_2" onclick="colorDiv('div_2'); return false;" >
<div id="div_3" onclick="colorDiv('div_3'); return false;" >

What's wrong with that?

reagards - julian

[matt.macchia]

My guess is that in this check:

if (document.getElementById(div_id).style.backgroundC olor == '#00cc00')

It is changing the cc to CC which then makes the statement incorrect.
I would try to .toLowerCase() the backgroundColor like:
if (document.getElementById(div_id).style.backgroundC olor.toLowerCase()
== '#00cc00')

[julian_m]

ma**********@gmail.com wrote:

My guess is that in this check:

if (document.getElementById(div_id).style.backgroundC olor == '#00cc00')

It is changing the cc to CC which then makes the statement incorrect.
I would try to .toLowerCase() the backgroundColor like:
if (document.getElementById(div_id).style.backgroundC olor.toLowerCase()
== '#00cc00')

It doesn't work either.

I tryied with 'rgb(x,x,x )' without luck.

if (document.getElementById(div_id).style.backgroundC olor == 'rgb(255,
155,60)'){
document.getElementById(div_id).style.backgroundCo lor = 'rgb(55,
155,240)';
}else{
document.getElementById(div_id).style.backgroundCo lor = 'rgb(255,
155,60)';
}

It's strange isn't it?

regards - julian

[Ian Collins]

julian_m wrote:

ma**********@gmail.com wrote:

My guess is that in this check:

if (document.getElementById(div_id).style.backgroundC olor == '#00cc00')

It is changing the cc to CC which then makes the statement incorrect.
I would try to .toLowerCase() the backgroundColor like:
if (document.getElementById(div_id).style.backgroundC olor.toLowerCase()
== '#00cc00')

It doesn't work either.

I tryied with 'rgb(x,x,x )' without luck.

if (document.getElementById(div_id).style.backgroundC olor == 'rgb(255,
155,60)'){
document.getElementById(div_id).style.backgroundCo lor = 'rgb(55,
155,240)';
}else{
document.getElementById(div_id).style.backgroundCo lor = 'rgb(255,
155,60)';
}

It's strange isn't it?

No, one or other (I can remember which one) browser inserts a space
after the comma. You have to use a regular expression replace to
normalise the value before the comparison.

--
Ian Collins.

[matt.macchia]

Ok,
I have come across this before and had to go back to old code to see
how I fixed it.
Here is what you need to do.
You were on the right track with the rgb values.
Here is my code.
obviously different colors but the same gist...

var background = element.style.backgroundColor.replace(/ /g, "");
if(background == 'rgb(254,147,17)') {
element.style.color = '#333333';
element.style.backgroundColor= '#FFFFFF';
} else {
element.style.color = '#FFFFFF';
element.style.backgroundColor= 'rgb(254,147,17)';
}

[Justin McConnell]

julian_m wrote:

function colorDiv(div_id)
{ alert(document.getElementById(div_id).style.backgr oundColor) would be a
good thing to do here. if (document.getElementById(div_id).style.backgroundC olor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundCo lor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundCo lor = '#00cc00';
}

}

What's wrong with that?

Firefox is converting your hexcodes to rgb values. So you should be
checking to see that backgroundColor is equal to some rgb value. But
note the format in the alert -- rgb(0, 204,0) is not the same as rgb(0,
204, 0).

[ASM]

ma**********@gmail.com a écrit :

Ok,
I have come across this before and had to go back to old code to see
how I fixed it.

simpliest way is to use class names
because each browser has its own way to remenber colors

--
Stephane Moriaux et son [moins] vieux Mac

[julian_m]

ma**********@gmail.com wrote:

Here is what you need to do.
You were on the right track with the rgb values.
Here is my code.
obviously different colors but the same gist...

var background = element.style.backgroundColor.replace(/ /g, "");
if(background == 'rgb(254,147,17)') {
element.style.color = '#333333';
element.style.backgroundColor= '#FFFFFF';
} else {
element.style.color = '#FFFFFF';
element.style.backgroundColor= 'rgb(254,147,17)';
}

It works like a charm ;)
Thanks for your time !!!

regards - julian

[ASM]

julian_m a écrit :

ma**********@gmail.com wrote:

var background = element.style.backgroundColor.replace(/ /g, "");
if(background == 'rgb(254,147,17)') {
element.style.color = '#333333';
element.style.backgroundColor= '#FFFFFF';
} else {
element.style.color = '#FFFFFF';
element.style.backgroundColor= 'rgb(254,147,17)';
}

It works like a charm ;)
Thanks for your time !!!

Sorry, it doesn't work with my iCab nor my Opera

This bellow and much more simple works fine everywhere.

<style type="text/css" media="screen">
div { line-height:2em; border:1px solid blue; margin:9px;
cursor:pointer; text-align:center; color:#333;}
..one { background: rgb(254,147,17); color: #fff; }
..two { background: #fff; color: #333;}
</style>
<script type="text/javascript">
function colorDiv(div_id) {
var element = document.getElementById(div_id);
element.className = (element.className=='one')?
'two' : 'one' ;
}
</script>
</head>
<body>
<div id="div_1" onclick="colorDiv('div_1');"> test 1 </div>
<div id="div_2" onclick="colorDiv('div_2');"> test 2 </div>
<div id="div_3" onclick="colorDiv('div_3');"> test 3 </div>

--
Stephane Moriaux et son [moins] vieux Mac

[Dr John Stockton]

JRS: In article <11**********************@j33g2000cwa.googlegroups .com>
, dated Thu, 18 May 2006 12:36:46 remote, seen in
news:comp.lang.javascript, julian_m <ju***********@gmail.com> posted :

Incredibly, this function works as expected in IE (changing the
div_id's color after every click) , whereas it only changes div_id's
color once
function colorDiv(div_id)
{
if (document.getElementById(div_id).style.backgroundC olor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundCo lor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundCo lor = '#00cc00';
}

}

I call the above function this way:

<div id="div_1" onclick="colorDiv('div_1'); return false;" >
<div id="div_2" onclick="colorDiv('div_2'); return false;" >
<div id="div_3" onclick="colorDiv('div_3'); return false;" >

What's wrong with that?

Your lines are too long, so your sending agent has wrapped one. Write
shorter lines, and don't use tabs in News - see FAQ 2.3.

The expression document.getElementById(div_id) is long & slow, and
should be factored out as X ; indeed, maybe X.style can be factored.
function colorDiv(div_id) { var X = document.getElementById(div_id)
if (X.style.backgroundColor == '#00cc00')
X.style.backgroundColor = '#00cccc';
else
X.style.backgroundColor = '#00cc00';
}
function colorDiv(div_id) { var X = document.getElementById(div_id)
X.style.backgroundColor =
X.style.backgroundColor == '#00cc00' ? '#00cccc' : '#00cc00' }
Then it is likely that you will have initialised to one of those
colours, in which case you might do

var A = 1 // or 0

function colorDiv(div_id) {
document.getElementById(div_id).style.backgroundCo lor =
(A = !A) ? '#00cccc' : '#00cc00' }
NOTES :
(1) I may have introduces errors in the code; that shown is merely
illustrative of concept.
(2) I have not addressed your original question; see what others have
written for that. But the final version avoids assumptions about the
format given on reading background colour.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.