Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript not receiving the correct response

    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"); }
    		}
    	}
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";
    			}
    		}
    	}
    }*/

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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>

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah so I tried that and it didn't work at all and I still got the same errors

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •