Dynamic Menus

[alexjewell]

I'm working on a site for a restaurant. The site calls for 2 menus at the moment, the lunch menu and the dinner menu. I created a script that would dynamically change the menu images according to the page number clicked, that way there isn't a separate page for each menu page or the need for the page to be refreshed to see the next menu page.

Only 2 things need to be changed and they're both classes of divs with ids. I call the div by its id and then change its class by whatever page number is clicked. I then change the link to a different color, again by changing the class, to show that it is the current page.

The function works for both lunch and dinner menus, as you will see. Here is the code:

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

The links look like this:

<div id="sbwrap">
	<div id="sub_box">
		Page: <a href="#" onclick="changeMenu('dinner',1)" id="one">One</a> | 
		<a href="#" onclick="changeMenu('dinner',2)" id="two">Two</a> | 
		<a href="#" onclick="changeMenu('dinner',3)" id="three">Three</a>
	</div>
</div>

And the menu looks like this:

<div id="container" class="dinner">
	<div id="dintitle"></div>
	<div id="dincont">
		<div id="dc" class="dc1"></div>
	</div>
	<div id="bot" class="dp1"></div>
</div>

For some reason, nothing happens when I click the link. I can't figure out what's wrong with my code and decided maybe you guys could help. I'm a bit rusty with javascript; I haven't used it in a long time.

Help!

[alexjewell]

I fixed the problem. The first issue was I was trying to change the class of the divs with just class. I guess in Javascript you use className. The other problem was I was putting two strings together using a period and not a plus sign...that's due to the fact that I do a lot of PHP programming. Anyway, here's the working code. If anyone wishes to revise it, make it better, etc...let me know:

function changeMenu(menu,number){
	if(menu == "lunch"){
		c = "lc";
		p = "lp";}
	else if(menu == "dinner"){
		c = "dc";
		p = "dp";}
	cont = document.getElementById(c);
	pageImg = document.getElementById('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;
}