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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts

    document.getElementById crashing

    Hello,

    I have a website that I need help with. You can visit it here: http://www.shahspace.com/bow/home.html. To see what I need help with, click on the services menu item and observe the alert message that comes up. It should say "point 1".

    Here is the code that executes that:

    Code:
    function enableScrolling(menuName)
    {
    	alert("point 1");
    	var menu = document.getElemenetById(menuName);
    	alert("point 2");
    ...
    }
    As you can see, there should be a second alert message that says "point 2", but there isn't. The script is crash when I try to assign to menu the object returned by document.getElementById(menuName). I have verified that menuName is correct. So why would this be crashing?

    To get a fuller understanding of my algorithm, I'll give you the following:

    The menu div:
    Code:
    <div id="services_menu" class="services_menu">
    ...
    </div>
    The "services" button:
    Code:
    <td><a href="#" onclick="displayMenu('services'); return false;"><img src="services.jpg" border=0></a></td>
    The displayMenu() function:
    Code:
    function displayMenu(menu)
    {
    	var menuName = menu + "_menu";
    	document.getElementById(menuName).style.display = "block";
    	
    	if (itemCount(menuName) >= 12)
    	{
    		enableScrolling(menuName);
    	}
    	else
    	{
    		disableScrolling(menuName);
    	}
    }
    The itemCount() function:
    Code:
    function itemCount(menuName)
    {
    	var menu = document.getElementById(menuName);
    	var divArray = menu.getElementsByTagName("div");
    	return divArray.length;
    }
    And the enableScrolling() function I already posted above.

    So essentially, when the user clicks on "service", the services menu becomes visible. If the menu contains 12 items or more, scrolling needs to be enabled. This entails setting the menu to a fixed height and allowing the user to scroll through it (scrolling, in this case, will be customized--I'm not using the div's native scrolling feature).

    The really odd thing is that in itemCount(), I have exactly the same line:

    var menu = document.getElementById(menuName);

    and it works fine there. Why not in my enableScrolling() function?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you have a typo in the scrolling function. you mispelled element

  • Users who have thanked DanInMa for this post:

    gib65 (03-14-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    typo

    Code:
    var menu = document.getElemenetById(menuName);
    should be
    Code:
    var menu = document.getElementById(menuName);
    Last edited by blaze4218; 03-14-2012 at 03:56 PM. Reason: oops, too slow...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • Users who have thanked blaze4218 for this post:

    gib65 (03-14-2012)

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    36
    Thanks
    6
    Thanked 0 Times in 0 Posts
    You're both right! Can't believe I missed that! Thanks.

  • #5
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello,

    As a suggestion, you can get a JavaScript debugger to help you look for mistakes in your coding. It can also target specific parts of the script, including "document.getElementById."
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Taro View Post
    Hello,

    As a suggestion, you can get a JavaScript debugger to help you look for mistakes in your coding. It can also target specific parts of the script, including "document.getElementById."
    You only need to get a debugger for Firefox and IE7 - all the other propular browsers (IE8+, Chrome, Safari, Opera) have a JavaScript debugger built in.

    To get the debugger for IE7 you need the developer toolbar plugin.

    The equivalent debugger for Firefox is provided by the venkmann extension. (there are alternate Firefox debuggers that work differently from the one built into the other browsers - that's the one that works the same).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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