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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Why do I get the error "... is not a function" here?

    Hey guys,

    I got this line of code:

    Code:
    var headlines = document.getElementById("navigation").getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("span");
    My debugger gives me this error: "document.getElementById("navigation").getElementsByTagName("ul").getElementsByTagName is not a function". What am I doing wrong, and how do I fix it?

    (Background: As a school assignment I'm trying to do an expandable menu, and my idea is to run a for-loop, making every element in the array 'headlines' respond to onclick.)

  • #2
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, so the line of code was actually inside an init function. I removed that part and now really only have the above line of code in my .js document. However, now the debugger says "document.getElementById("navigation") is null ". What am I doing wrong, and how do I fix it?

    Edit: I guess it's because the "navigation" element hasn't loaded yet. Which means I should have that init function onload afterall. But then how come this chunk of code doesn't do what I thought it would, namely alert "Hey!" when I click one of the spans?

    Code:
    window.onload = initAll;
    
    function initAll() {
    
    	var headlines = document.getElementById("navigation").getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("span");
    
    
    	for ( var i = 0 ; i < headlines.length ; i++ ) {
    		var headline = headlines[i];
    		headline.onclick = collapse;
    	}
    
    	function collapse() {
    		alert("Hey!");
    	}
    }
    Last edited by zhouhana; 01-15-2012 at 09:55 AM.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <html>
       
       <head>
       <title>Broken Page</title>    
    	  
    <script type="text/javascript">
    	window.onload = initAll;
    
    function initAll() {
    
    	var headlines = document.getElementById("navigation").getElementsByTagName("ul")[0].getElementsByTagName("span");
    
    
    	for ( var i = 0 ; i < headlines.length ; i++ ) {
    		var headline = headlines[i];
    		headline.onclick = collapse;
    	}
    
    	function collapse() {
    		alert("Hey!");
    	}
    }
    	
    </script>
       </head>
       
       <body >
        <div id="navigation">
                <ul>
    		<li><span>headline1</span></li>
    		<li><span>headline2</span></li>
    	    </ul>
        </div>
       </body>
       
    </html>

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, it magically works!

    So, how come

    Code:
    var headlines = document.getElementById("navigation").getElementsByTagName("ul")[0].getElementsByTagName("span");
    works, but not

    Code:
    var headlines = document.getElementById("navigation").getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("span");
    ? (Sorry, I'm a noob, need to learn these things!)

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    getElementsByTagName("ul") will give you an element list (which is some kind of an array) of ALL the elements tagged <ul>. To get sub elements of a specific (let's say the first) ul element, you have to index the array first.

    Code:
    getElementsByTagName("ul")[0]
    will give you the first element with tagname "ul"

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    getElementsByTagName
    notice element is plural
    elements
    it returns a collection of
    tagnames that must be
    refferenced like an array
    getElementsByTagName("ul")[0]
    is the first element retrned
    getElementsByTagName("ul")[1]
    is the second element returned

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a lot. I'd actually read a bit about that -- what I don't get is why I have to define the ul as [0] for it to work when there is only one ul (that is, [0]) in the example? (Or am I missing something? I probably am!)

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by zhouhana View Post
    Thanks a lot. I'd actually read a bit about that -- what I don't get is why I have to define the ul as [0] for it to work when there is only one ul (that is, [0]) in the example? (Or am I missing something? I probably am!)
    Without an index (such as [0])
    getElementsByTagName returns
    a refference to an HTMLcollection
    not a refference to an element

    getElementsByTagName is a refference
    to an HTMLcollection
    you need a refference to
    an element contained in
    the collection

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    Yes, getElementsByTagName is an HTMLcollection EVEN if there is only one element in it!


  •  

    Posting Permissions

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