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.backgroundColor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundColor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundColor = '#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.backgroundColor == '#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.backgroundColor.toLowerCase()
== '#00cc00')

 

[julian_m]

My guess is that in this check:
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.backgroundColor.toLowerCase()
== '#00cc00')

It doesn't work either.

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

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

It's strange isn't it?

regards - julian

 

[Ian Collins]

It doesn't work either.

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

if (document.getElementById(div_id).style.backgroundColor == 'rgb(255,
155,60)'){
document.getElementById(div_id).style.backgroundColor = 'rgb(55,
155,240)';
}else{
document.getElementById(div_id).style.backgroundColor = '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.

 

[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]

function colorDiv(div_id)
{

alert(document.getElementById(div_id).style.backgroundColor) would be a
good thing to do here.

if (document.getElementById(div_id).style.backgroundColor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundColor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundColor = '#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]

(e-mail address removed) 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

 

[julian_m]

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 :

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

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Thu, 18 May 2006 12:36:46 remote, seen in

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.backgroundColor ==
'#00cc00'){
document.getElementById(div_id).style.backgroundColor = '#00cccc';

}else{
document.getElementById(div_id).style.backgroundColor = '#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.backgroundColor =
(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.