Javascript not receiving the correct response

GhostDZ9 · 01-13-2012, 02:57 PM

Hey guys,

I am doing a website and the way it is suppose to work is when you click on a link there is a little triangle beside it, so when you click on it the triangle is suppose to face down but more links appear when you click on it. Anyways here is the code if someone could please tell me what im doing wrong?

HTML

Code:

<ul class="menu" id="subnavmenu">
					<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>
					<ul id="sublist1" style="display:none;">
					<li><a href="#">Visit Us</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Archives Unboxed and Revealed</a></li>
					</li>
					</ul>

CSS

Code:

#subnavmenu ul.menu { display: block; overflow:hidden; }

JAVASCRIPT

Code:

function showHide(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (arrow.src) { arrow.src = arrow.src.replace("down","right"); }
		}
		else {
			menu.style.display = "block";
			if (arrow.src) { arrow.src = arrow.src.replace("right","down"); }
		}
	}
}

xelawho · 01-13-2012, 03:14 PM

maybe it's too early for me, but I can't see where you actually supply the code with the image paths to your arrows.

or is that in another bit that you didn't include?

GhostDZ9 · 01-13-2012, 03:29 PM

well the image is alredy there on the website it gets referenced in the CSS but when I run the code the Javascript gets these two errors:

1. Microsoft JScript runtime error: Object required
2. Microsoft JScript runtime error: 'null' is null or not an object

xelawho · 01-13-2012, 03:52 PM

I think this is part of my confusion, because this line:

Code:

var arrow = document.getElementById(element_id + '_arrow');

would imply that there is an element with the id "sublist1_arrow"

but I don't see that, either.

can you post your full code, or a link to the page?

GhostDZ9 · 01-13-2012, 04:00 PM

So this is the entire part to the left nav which is where the errors are occur, I cannot link you because im running it on a local host on my machine.

HTML

Code:

<div class="leftnav">
      		<div class="photocap grey"><div class="nav_top">&nbsp;</div></div>
	  		<div class="mycolour"><h2 class="header"> <a onClick="showHide('subnavmenu');return false;" href="#">Archives Of Ontario<img src="/Archive/images/arrowwhite_down.gif" width="9" height="9" alt="" id="subnavmenu_arrow" /></a></h2></div>
				  <ul class="menu" id="subnavmenu">
					<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>
					<ul id="sublist1" style="display:none;">
					<li><a href="#">Visit Us</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Archives Unboxed and Revealed</a></li>
					</li>
					</ul>
					<li><a href="#" onClick="showHide('sublist2');return false;" id="subheading">Accessing Our Collection</a>
					<ul id="sublist2" style="display:none;">
					<li><a href="#">Research Guides and Tools</a></li> 
					<li><a href="#">Microfilm Interloan Services</a></li>
					</li>
					</ul>
					<li> <a href="#" onClick="showHide('sublist3');return false;" id="subheading">Services We Offer</a>
					<ul id="sublist3" style="display:none;"> 
					<li><a href="#">To the Public</a></li>
					<li><a href="#">To the Government</a></li>
					</ul> 
					</li>
					<li> <a href="#" onClick="showHide('sublist4');return false;" id="subheading">Tracing Your Family History</a>
					<ul id="sublist4" style="display:none;">
					<li><a href="#">Getting Started</a></li>
					<li><a href="#">The Records</a></li>
					</ul>
					</li>
					<li> <a href="#" onClick="showHide('sublist5');return false;" id="subheading">Donating to the Archives</a>
					<ul id="sublist5" style="display:none;">
					<li><a href="#">What We Collect</a></li>
					<li><a href="#">How to Donate</a></li>
					<li><a href="#">Recent Donors</a></li>
					</ul>
					</li>
					<li> <a href="#" onClick="showHide('sublist6');return false;" id="subheading">Education at the Archives</a>
					<ul id="sublist6" style="display:none;">
					<li><a href="#">Workshops</a></li>
					<li><a href="#">Online Lesson Plans</a></li>
					<li><a href="#">Resources</a></li>
					</ul>
					</li>
					<li> <a href="#" onClick="showHide('sublist7');return false;" id="subheading">Explore Our Exhibits</a>
					<ul id="sublist7" style="display:none;">
					<li><a href="#">Online</a></li>
					<li><a href="#">Traveling</a></li>
					<li><a href="#">Gallery</a></li>
					</ul>
					</li>
					<li> <a href="#" onClick="showHide('sublist8');return false;" id="subheading">Visit Us On...</a>
					<ul id="sublist8" style="display:none;">
					<li><a href="#">Youtube</a></li>
					<li><a href="#">Twitter</a></li>
					</ul>
					</li>
		  </div>
	</div>

JAVASCRIPT

Code:

function showHide(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (arrow.src) { arrow.src = arrow.src.replace("down","right"); }
		}
		else {
			menu.style.display = "block";
			if (arrow.src) { arrow.src = arrow.src.replace("right","down"); }
		}
	}
}

function showHideMin(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var header = document.getElementById('explore');
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (header.style) { header.style.padding = "0px 5px 0px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("down","right"); 
				arrow.style.bottom = "6px"; 
			}
		}
		else {
			menu.style.display = "block";
			if (header.style) { header.style.padding = "0px 5px 6px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("right","down"); 
				arrow.style.bottom = "12px";
			}
		}
	}
}

function showHideSub(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var header = document.getElementById('subnav');
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (header.style) { header.style.padding = "0px 5px 0px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("down","right"); 
				arrow.style.bottom = "6px"; 
			}
		}
		else {
			menu.style.display = "block";
			if (header.style) { header.style.padding = "0px 5px 6px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("right","down"); 
				arrow.style.bottom = "12px";
			}
		}
	}
}

function changeHeight(new_height) {
	document.getElementById('banner').style.height = new_height + 'px';
}

/*function showHideSub2(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var header = document.getElementById('etsubnav');
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (header.style) { header.style.padding = "0px 5px 0px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("down","right"); 
				arrow.style.bottom = "6px"; 
			}
		}
		else {
			menu.style.display = "block";
			if (header.style) { header.style.padding = "0px 5px 6px 5px"; }
			if (arrow.src) { 
				arrow.src = arrow.src.replace("right","down"); 
				arrow.style.bottom = "12px";
			}
		}
	}
}*/

xelawho · 01-13-2012, 04:29 PM

Presumably this line works:

Code:

<div class="mycolour"><h2 class="header"> <a onClick="showHide('subnavmenu');return false;" href="#">Archives Of Ontario<img src="/Archive/images/arrowwhite_down.gif" width="9" height="9" alt="" id="subnavmenu_arrow" /></a></h2></div>

but with the code you have posted it has neither an img src or an id, so as the error message says, it requires an object (the image) but it is null, so it won't do anything because it doesn't know what you're talking about.

It looks to me like you need to change this line:

Code:

<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>

to something like this:

Code:

<li><a onClick="showHide('sublist1');return false;" href="#">About Us<img src="/Archive/images/arrowwhite_down.gif" width="9" height="9" alt="" id="sublist1_arrow" /></a>

GhostDZ9 · 01-13-2012, 08:53 PM

Yeah so I tried that and it didn't work at all and I still got the same errors

xelawho · 01-13-2012, 10:24 PM

I don't know... the code has three separate functions but only calls one of them. The only way I could get it working how I think it should was to change the showHideSub function to this:

Code:

function showHideSub(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
	//	var header = document.getElementById('subnav');
			if (menu.style.display == "block") {
			menu.style.display = "none";
	//		if (header.style) { header.style.padding = "0px 5px 0px 5px"; } //this would make sense if there were an element with an id of 'subnav', but no...
		}
		else {
			menu.style.display = "block";
			}
	}
}

and call that from the onclick on the submenu instead of the showHide function.

but you still have 8 elements with the same "subheading" id, which is bound to cause problems if you ever use that id.

apart from that it seems fine