Strange problem when comparing Hex code 1

[tnsbuff]

Hi,

Can someone tell me why this script works when I use color "names" in the if comparison, but not when I use the hexadecimal code: (the problem only seems to be in the if statement, it's ok when I use hex code in the other lines)...strange

function toggleColor(){
coloredBkg = document.getElementById('bkg');

if(coloredBkg.style.backgroundColor=='green'){
coloredBkg.style.backgroundColor = '#FF579E';
}
else{
coloredBkg.style.backgroundColor = 'green';
}
}

Thanks.

 

[BillyRayPreachersSon]

Several reasons:

1. Case (you are testing in uppercase, and some browsers return the colour in lowercase).

2. Some browsers (FF, for example), seem to return colours as "RGB" (so #FF57E is returned as "rgb(255, 87, 158)".

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tnsbuff]

Thanks, in IE I guess #1 was the problem.

This didn't work:

function toggleColor(){
coloredBkg = document.getElementById('bkg');

if(coloredBkg.style.backgroundColor=='#71B9D7'){
coloredBkg.style.backgroundColor = '#FF579E';
}
else{
coloredBkg.style.backgroundColor = '#71B9D7';
}
}

but this did:

function toggleColor(){
coloredBkg = document.getElementById('bkg');

if(coloredBkg.style.backgroundColor=='#71b9d7'){
coloredBkg.style.backgroundColor = '#FF579E';
}
else{
coloredBkg.style.backgroundColor = '#71B9D7';
}
}

... even though in the body of the html I used #71B9D7.

However, now I can't get it to work in Firefox. I tried:

if(coloredBkg.style.backgroundColor=='rgb(113,185,215)')

... but that's obviously not quite right because then it didn't work at all in either one...but no error messages either.

 

[BillyRayPreachersSon]

Instead of comparing the style directly, store your current colour choice in a variable, and test that instead. No browser will mess with variables like they do with styles.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tnsbuff]

Thanks Dan. Unfortunately no matter what I do I can't seem to get it to work in Firefox. Must be having a brain cramp today.

 

[BillyRayPreachersSon]

Did you try the suggestion of using a flag / variable instead of relying on reading the style each time? I guarantee you it will work - if properly coded, of course.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tnsbuff]

Yeah I did. I'm sure it was a problem with my code but I couldn't get it to work. Seems easy enough. I think I'll come back to this later when my brain's working better.

Thanks for your help.

 

[BillyRayPreachersSon]

I've not tested this, but it should be fine:

var currentColor = '';
function toggleColor() {
	coloredBkg = document.getElementById('bkg');

	if (currentColor == '#FF579E') {
		currentColor = coloredBkg.style.backgroundColor = 'green';
	} else {
		currentColor = coloredBkg.style.backgroundColor = '#FF579E';
	}
}

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tnsbuff]

That works just fine. Thanks a bunch!