Script Not Working in IE

[alexjewell]

I have menus for a restaurant. Each "page" is a transparent gif that displays over a constant background. With JavaScript, I have those gif's change when someone clicks on a page number. The "pages" change perfectly in every browser but IE, even 8. Why?

Here's an example, the Lunch menu: http://vittoriosbuonappetito.com/ind...enu&menu=lunch

Here is the HTML for the menu:

		<div id="menu_submenu">
			<span>
				Page: 
				<a href="#" onclick="changeMenu('lunch',1)" id="one" class="sbover">1</a> . 
				<a href="#" onclick="changeMenu('lunch',2)" id="two">2</a> . 
				<a href="#" onclick="changeMenu('lunch',3)" id="three">3</a> .
				<a href="printMenu.php?menu=lunch" target="_blank">Print</a>
			</span>
		</div>
		
		<div id="menu_container" class="lunch">
			<div id="luntitle"></div>
			<div id="luncont">
				<div id="lc" class="lc1"></div>
			</div>
			<div id="menu_bot" class="lp1"></div>
		</div>

The following is the JavaScript:

function changeMenu(menu,number){
	if(menu == "lunch"){
		c = "lc";
		p = "lp";}
	else if(menu == "dinner"){
		c = "dc";
		p = "dp";}
	else if(menu == "cater"){
		c = "cc";
		p = "cp";}
	cont = document.getElementById(c);
	pageImg = document.getElementById('menu_bot');
	link1 = document.getElementById('one');
	link2 = document.getElementById('two');
	link3 = document.getElementById('three');
	if(number == 1){
		link1.className="sbover";
		link2.className="";
		link3.className="";
	}
	else if(number == 2){
		link1.className="";
		link2.className="sbover";
		link3.className="";
	}
	else if(number == 3){
		link1.className="";
		link2.className="";
		link3.className="sbover";
	}
	else{
		number=1; 
		link1.className="sbhover";
		link2.className="";
		link3.className="";
	}
	cont.className=c+number;
	pageImg.className=p+number;
}

[azoomer]

I'm just playing around without really understanding much of it, but there's a javascript error in IE relating to the Id 'cont'. Can you rename this id <div id="cont"> without ruining everything ?

[clueful]

I have menus for a restaurant. Each "page" is a transparent gif that displays over a constant background. With JavaScript, I have those gif's change when someone clicks on a page number. The "pages" change perfectly in every browser but IE, even 8. Why?

It's the common mistake of creating global variables (which you don't need) whose name conflicts with an ID. When you declare a variable inside a function, use the var keyword.