Issues with a list box and trying to get it to show

[htmlnoobie3344]

I don't know if this is a good place to post it but seeing as it's general, i'll try here.anyways, what i'm trying to do is this: have a list box with some options then what ever option they pick, that would show the correnspanging Menu based on what they choose. Say:

//Assume we got the index and the menu element.switch(IndexValue){		case "Appetizers":		{			   //also assume we got the menu we want to show and it's index			   if(Appetizers_select.style.visibility="hidden")			   {						  Appetizers_select.style.visibility="visible";			   }				break;		}}

i'm also including all my files except the image of the first page, the program seems to be in menu.html and main_menu.js i don't know if you guys can help me out here but i'd hope so.Hmmm, i can't upload rar files....

[jeffman]

No one wants to download rar files anyway. It's okay to post a bunch of code. Really.A first guess suggests maybe you are hoping that style.visibility will contain the value set in your style sheet. This is false. The style property refers to the style attribute in your element tag. When JavaScript sets style properties, it is the style attribute that gets adjusted, not the style sheet. JavaScript can only read style attributes if they are hardcoded into the element's style attribute to begin with, or after they have been set by JavaScript.If the starting style value of an element is "hidden", a better test in your if-conditional might be != "visible"Another technique is described here and here. It is a very complete discussion, however.I'm assuming that Appetizers_select has been set?

[htmlnoobie3344]

No one wants to download rar files anyway. It's okay to post a bunch of code. Really.A first guess suggests maybe you are hoping that style.visibility will contain the value set in your style sheet. This is false. The style property refers to the style attribute in your element tag. When JavaScript sets style properties, it is the style attribute that gets adjusted, not the style sheet. JavaScript can only read style attributes if they are hardcoded into the element's style attribute to begin with, or after they have been set by JavaScript.If the starting style value of an element is "hidden", a better test in your if-conditional might be != "visible"Another technique is described here and here. It is a very complete discussion, however.I'm assuming that Appetizers_select has been set?

yes it is, i'll try your way, if not i'll paste the entire code as clearly as i can TY

[htmlnoobie3344]

Ok, a friend of mine has helped me with it, fixing it a bit, but now having treid those things that i read on the web site you gave me, it still doesn't work, so i'm going to show you my HTML code for that element and the JS code:JavaScript Code:

//function to get input from main menufunction getInputFromMainMenu(){	var Appetizers_menu = document.getElementById("DYNAMIC_APPETIZERS_LIST");	var Dynamic_Appetizers_Index = Appetizers_menu.options[Appetizers_menu.selectedIndex].value;	var Form2 = document.getElementById("APPE_LIST_FORM");	//Get the visibility style	var isHidden = getStyleValue(Appetizers_menu,"visibility");	//Get the Form.	var Form = document.getElementById("ID_MAINMENU_FRM");	//Get the menu's ID so it can be manipulated	var main_select = document.getElementById("SEL_MAIN_MENU_FOODS"); 	//Get the list:		//This is a variable to get the current selected index:	var IndexValue = main_select.options[main_select.selectedIndex].value; 	//Get the dynamic appetizers list box:		var Button_large = document.getElementById("APPETIZERS_GRILLED_CHICKEN_SALAD_LARGE");		//isHidden = "hidden";			/*This switch statement will check which index # is clicked, then act accordingly.*/	switch(IndexValue)	{		case "Appetizers":		{						if(isHidden=="hidden")			{				isHidden = "visible";			}			break;		}		default:		{			if(!IndexValue)			{				<span class="selectInvalidState"></span>				break;			}		}	}	}function getStyleValue(el, property){   var cs, val = false;   if (window.getComputedStyle) {	  cs  = getComputedStyle(el, null);	  val = cs.getPropertyValue(property);   }   else if (el.currentStyle) {	  property = hyphen2camel(property);	  val = el.currentStyle[property];   }   return val;}

HTML code of the element:

<form id="APPE_LIST_FORM" method="get" action="">			<span id="Appetizers_select">			<label>				<select name="DYNAMIC_APPETIZERS_LIST" size="4" id="DYNAMIC_APPETIZERS_LIST" style="visibility:hidden">				</select>			</label>			</span>		 </form>

anything i'm doing wrong? sorry to ask so many questions, i've been using web dev stuff for a few days now and a lot of what i know comes from C++ programming for 3 years (waste of my time)

[jeffman]

I don't know about anything else, but this section mixes raw HTML with JavaScript. That's a syntax error, not a runtime error, so the function never executes. if(!IndexValue) { <span class="selectInvalidState"></span> break; }What was your goal here? Did you want to put that span someplace? Change something's className?

[htmlnoobie3344]

I don't know about anything else, but this section mixes raw HTML with JavaScript. That's a syntax error, not a runtime error, so the function never executes. if(!IndexValue) { <span class="selectInvalidState"></span> break; }What was your goal here? Did you want to put that span someplace? Change something's className?

i thought the was the way ti set a state if no item was selected.....as i've said, i'm fairly new to web programming

[jeffman]

JavaScript can change a JavaScript variable. A global variable is automatically static and will preserve state, if that is what you need. Or you can change a property of some element in the document. You would need a reference to that element.

[htmlnoobie3344]

JavaScript can change a JavaScript variable. A global variable is automatically static and will preserve state, if that is what you need. Or you can change a property of some element in the document. You would need a reference to that element.

refrence as in an ID? i've got 2 or 3 CSSes with all the IDs in the document. is that what you mean? everything else seems to work expect that.......btw, how come certain functions don't highlight? like:

function getStyleValue(el, property){   var cs, val = false;   if (window.getComputedStyle) {	  cs  = getComputedStyle(el, null);	  val = cs.getPropertyValue(property);   }   else if (el.currentStyle) {	  property = hyphen2camel(property);	  val = el.currentStyle[property];   }   return val;}

the getComputedStyle doesn't highlight and neither does getPropertyValue, so i don't know. and by refrecnging an element do you mean getting the ID in a variable with: war Button = document.getElementById("Id name")? cause i do that when i want to edit values

[jeffman]

I was speaking only of JavaScript, not CSS. document.getElementById is one way, maybe the most common way, to get a reference to an element. I only mentioned it because you wrote about changing the state of something, but I wasn't clear what it was or what state you wanted to change.When you say highlight, are you referring to the syntax highlighting in your editor? Editors have their own words that may or may not correspond to actual standards. I find that some editors are simply not aware of some of the lesser-used DOM methods. Also, getComputedStyle and getPropertyValue are IE-only methods. Your editor may highlight only methods that belong to the W3 standard (perhaps with some historical exceptions).