...

View Full Version : Why do I get the error "... is not a function" here?



zhouhana
01-15-2012, 08:51 AM
Hey guys,

I got this line of 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.)

zhouhana
01-15-2012, 09:49 AM
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?



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

DaveyErwin
01-15-2012, 11:37 AM
<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>

zhouhana
01-15-2012, 01:26 PM
Thanks, it magically works!

So, how come


var headlines = document.getElementById("navigation").getElementsByTagName("ul")[0].getElementsByTagName("span");

works, but not


var headlines = document.getElementById("navigation").getElementsByTagName("ul").getElementsByTagName("li").getElementsByTagName("span");

? (Sorry, I'm a noob, need to learn these things!)

devnull69
01-15-2012, 01:30 PM
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.



getElementsByTagName("ul")[0]

will give you the first element with tagname "ul"

DaveyErwin
01-15-2012, 01:35 PM
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

zhouhana
01-15-2012, 02:39 PM
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!)

DaveyErwin
01-15-2012, 02:51 PM
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

devnull69
01-15-2012, 04:35 PM
Yes, getElementsByTagName is an HTMLcollection EVEN if there is only one element in it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum