document.bgColor doesn't work in firefox ?

**djemmers** · Mar 12, 2007 08:35

hi,

the next script works perfectly in explorer but doesn't work ik firefox,
It is supposed to change bgcolor of the page depending on wich menu the page belongs to.
REPLACE_BY_MENU is replaced by the correct number.
So the error should lie in document.bgcolor ?
you can see the result at www.bouworde.be (dutch speaking site)

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Bouworde vzw </TITLE>
<META NAME="Generator" CONTENT="">
<META NAME="Author" CONTENT="Faber Vanmolkot iov Bouworde vzw">
<META NAME="Keywords" CONTENT=" bouwkamp, sociaalkamp, ecokamp, sensokamp, vrijwilligerswerk ">
<META NAME="Description" CONTENT="">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--vervangt bollen door tekst EN laat telkens het juiste menu zien links-->
<script type="text/javascript">
			//knop "zwart" maken
			function bolIt(id){
				document.getElementById('bol' + id ).src='layout/bol' + id + '_of.gif';// was 'images/test' + id + '_on.GIF'
			}
			function bolIt(id,huidig){
				if (id!=huidig){
				document.getElementById('bol' + id ).src='layout/bol' + id + '_of.gif';// was 'images/test' + id + '_on.GIF'
				}
			}
			//knop "grijs" maken:
			function whiteIt(id){
				document.getElementById('bol' + id).src='layout/bol' + id + '_on.gif'; //'layout/bol' + id + '_of.gif'
			}

			function loadMenu(id) {
				
				bolIt(id);
				
				//alle menus onzichtbaar maken:
				//for(dummy=1;dummy<=4;dummy++){
				//	document.getElementById('menu'+dummy).style.display='None';
				//}
				
				//huidige menu tonen:
				document.getElementById('menu'+id).style.display='';
			}
			function unloadMenu(id) {
				whiteIt(id);
				//document.getElementById('menu'+id).style.display='None';
			}
				var geval = REPLACE_BY_MENU;
				switch (geval) {
				case 0: document.bgColor = '#fbc202'; break;
				case 2: document.bgColor = '#fbc202'; break;
				case 11: document.bgColor = '#f3983f'; break;
				case 44: document.bgColor = '#f1abb1'; break;
				case 52: document.bgColor = '#7e1a26'; break;
				default: document.bgColor = '#fbc202';
				}
		</script>
</HEAD>

<BODY bgcolor=#f79648>

**kyberfabrikken** · Mar 12, 2007 09:06

Try with document.style.backgroundColor

**Kravvitz** · Mar 12, 2007 09:08

You could try document.body.bgColor, but bgColor is obsolete.

Use document.body.style.backgroundColor instead.

**djemmers** · Mar 13, 2007 04:15

tnx for the replies but...

document.body.style.backgroundColor doesn't work in explorer and ff .... :-(
same for document.style.backgroundColor and document.body.bgColor
also tried document.style.bgColor... nothing.

Am I doing something else wrong ?
Should I change my body tag ? Or use the style.css page ?

djemmers

**kyberfabrikken** · Mar 13, 2007 08:36

Originally Posted by djemmers

document.body.style.backgroundColor doesn't work in explorer and ff .... :-(

Works for me.

**Kravvitz** · Mar 13, 2007 11:25

Oh! You're running it before the page has finished loading, aren't you?

You can't do that. You need to use a window.onload handler.
The simplest way to do that is this:

Code:

window.onload = function(){
  var bstyle = document.body.style;
  switch (geval) {
    case 0: bstyle.backgroundColor = '#fbc202'; break;
    case 2: bstyle.backgroundColor = '#fbc202'; break;
    case 11: bstyle.backgroundColor = '#f3983f'; break;
    case 44: bstyle.backgroundColor = '#f1abb1'; break;
    case 52: bstyle.backgroundColor = '#7e1a26'; break;
    default: bstyle.backgroundColor = '#fbc202';
  }
}

**djemmers** · Mar 14, 2007 07:38

how do I run the code after the page finished loading ?
put it at the bottom of the page ?
after the </body> tag ?

edit: works now (behind </body> tag) tnx a lot !