Jump to content

Javascript in Firefox error


theAntiGeek

Recommended Posts

hello there. can anyone tell me why i am getting the following error for this small bit of javascript im running in the <head> of my html page when i open it in firefox. it works perfectly in IE. it has something to do with the function "togglemenu" as my other function "togglebutton" appears to be workin ok. its a drop down menu incase you wondered :) cheers guyserror massage:Error: sweetSub is not definedheres my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	<title>Stockan and Gardens</title>	<link href="styles/stock_and_gardens.css" rel="stylesheet" type="text/css" />	<script type="text/JavaScript">			function toggleButton(butt)		{			if(butt.style.borderTopStyle == "inset")			{				butt.style.borderStyle = "outset";			}			else 			{				butt.style.borderStyle = "inset";			}		}			function toggleMenu(menu)		{						if(menu.style.display == "inline")			{				menu.style.display = "none";			}			else 			{				menu.style.display = "inline";			}		}	</script></head><body>	<div id="container">		<div id="header">		</div>		<div id="nav">			<ul>				<li><a href="index.html">HOME</a></li>				<li>THE PRODUCTS</li>				<li><a href="contact.html">CONTACT US</a></li>			</ul>					</div>		<div id="main">			<div id="left">					<div class="button" onMouseOver="this.style.cursor='pointer'" onselectstart="return false" onmouseDown="toggleButton(this)" onmouseUp="toggleButton(this); toggleMenu(sweetSub)">            					SWEET BISCUITS					</div>					<div class="sub" id="sweetSub">						<div class="menuSub"><a href="coconutcookie.html">Coconut Cookie</a></div>						<div class="menuSub"><a href="">Lemon Cookie</a></div>						<div class="menuSub"><a href="">Oat and Honey</a></div>						<div class="menuSub"><a href="">Perkins</a></div>						<div class="menuSub"><a href="">Stem Ginger</a></div>					</div>					<div class="button" onMouseOver="this.style.cursor='pointer'" onselectstart="return false" onmouseDown="toggleButton(this)" onmouseUp="toggleButton(this); toggleMenu(savourySub)">            					SAVOURY BISCUITS					</div>					<div class="sub" id="savourySub">						<div class="menuSub"><a href="">Butter Biscuits</a></div>						<div class="menuSub"><a href="">Butter Puffs</a></div>					</div>					<div class="button" onMouseOver="this.style.cursor='pointer'" onselectstart="return false" onmouseDown="toggleButton(this)" onmouseUp="toggleButton(this); toggleMenu(oatSub)">            					OATCAKES					</div>					<div class="sub" id="oatSub">						<div class="menuSub"><a href="">Cocktail Oatcakes</a></div>						<div class="menuSub"><a href="">Granary Oatcakes</a></div>					</div>													</div>			<div id="contentproduct">				<h1>Our Products</h1>								<p>We have three cartegories of products, please select which you want to view by using the menu on the left.</p>											</div>			<div id="footer">				Enquiries to stockan and gardens			</div>		</div>	</div></body></html>

Edited by aspnetguy
Link to comment
Share on other sites

thanks for the help. i added the single quotes and now im getting a new error which is this:Error: menu.style has no propertiesits refferring to line 27 which is the if statement arguement for the toggleMenu function.i dont have a clue how to fix this :)so any more help is much appreciatted.cheers

Link to comment
Share on other sites

thanks for the help. i added the single quotes and now im getting a new error which is this:Error: menu.style has no propertiesits refferring to line 27 which is the if statement arguement for the toggleMenu function.i dont have a clue how to fix this  :)so any more help is much appreciatted.cheers

Have a look at this topic, i've done one of these menus before, the code fully works without errors so might be a better platform to start from.http://w3schools.invisionzone.com/index.ph...wtopic=5098&hl=Let me know how you get on :)
Link to comment
Share on other sites

cheers scott that help loads.i have a question, the "objectID", i changed the name of it in my code, and then it didnt work, so obviously "objectID" is an attribute name. right? also, is it an attribute of the id passed into the fucntion from the html page or something else.just wondering for future reference. thanks again :)

Link to comment
Share on other sites

Without seeing the code I would guess it is the ID of an HTML element in your document.It is probably passed to a function or used to get the lement like this

document.getElementById(objectID);

Link to comment
Share on other sites

Yes aspnetguy is correct.This is the function, note that if you change one objectID you must change them all or it won't work.function toggleMenu(objectID){ var object = document.getElementById(objectID); if (object.style.display =='block') object.style.display='none'; else object.style.display='block'; return;}And this is the function call.<a href="java script:toggleMenu('menu1')">BREAKFAST</a><a href="java script:toggleMenu('menu2')">LUNCH</a><a href="java script:toggleMenu('menu3')">DINNER</a>So objectID is the value of whatever link was clicked ie menu1, menu2 or menu 3Is that clear enough :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...