Setting the Style of an Element in an Array

function test() {
	var contentelementlist = new Array(document.getElementsByName('box1000content'));
	var middleelementlist = new Array(document.getElementsByName('box1000middle'));
	for(x in middleelementlist) {
		var height = contentelementlist[x].offsetHeight;
		if(height >= 35) {
			middleelementlist[x].style.height = height - 35 + 'px';
		}
		else {
			middleelementlist[x].style.height = '0px'; //the error occurs.
		}
		currentindex++;
	}
}

Don’t ask why I need a function that does that, I’m not sure why I should need one my own self, but here we are.

Only problem is, I get an error telling me that middleelementlist[x].style is undefined. After some digging, I found that contentelementlist.offsetHeight also is undefined, though this doesn’t throw an error.

The prototype and scriptaculous Javascript frameworks are at your disposal for this issue

You can see the page this is implemented on here: (link removed for security purposes by user). The function isn’t called until you mouse over a div with the class box1000content. This div holds all the lorem ipsum, so mouse over that.

I’m using an IP because my home computer doesn’t have a domain. I’ll change it in a few weeks to avoid bots and other unwanted traffic, or when the issue gets fixed; whichever comes first.

Also, as an afterthought, I should probably note that I’m not a professional web developer or designer. I’m a 17 year old who’s good with computers and learns quick. This site could technically be classed as nephew art, but I like to think it looks substantially better than that. With that in mind, I would also like to point out that I have not finished the navigation. I know, the triangle button should be more clear as to its purpose.

I don’t understand why you’re doing this:

var contentelementlist = new Array(document.getElementsByName('box1000content'));

document.getElementsByName returns an array-like nodelist which you can use by itself.

Also, you’d be better off using a normal for loop.

function test() {
	var contentelementlist = document.getElementsByName('box1000content');
	var middleelementlist = document.getElementsByName('box1000middle');
	for (var i = 0, j = middleelementlist.length; i < j; i++) {
		var height = contentelementlist[i].offsetHeight;
		if(height >= 35) {
			middleelementlist[i].style.height = height - 35 + 'px';
		}
		else {
			middleelementlist[i].style.height = '0px'; //the error occurs.
		}
	}
}

There’s a difference between array and array-like? I know JavaScript is dynamically typed, so do you mean that your code and my equivalent do the same thing?

I’ll try out the for loop, but I’m afraid I can’t do that at the moment. There’s all day event today, and I’ll need to be elsewhere, but I’ll post here with my results sometime this evening. Thanks your help!

Thanks for your help, Raffles; your code works swimmingly. I’m not entirely sure why, but I’m just curious enough to keep combing through a copy of the faulty version, which I kept. I’ll post if I find out what the specific cause was.

I’m also curious as to why a normal for loop is desirable over a for x in y loop. Wouldn’t it simply eliminate the need for typing in the setup parameters for the for loop, thusly making in easier to read?

You can use a for…in loop if you want, it will work just as well. In fact, in a case like this it would seem sensible.

The reason your code failed was because of the first two lines in the function. The nodelist is a collection of DOM nodes which is very much like an array but is not exactly the same. Thus, you can iterate through a nodelist and it has a length property, but you can’t use some of the Array methods on it.

What you were doing in those two lines didn’t make sense. What they did was create an array with a single element, which was an object (nodelist) containing the HTML elements.

Ah. So if I wanted to get use my original code, I’d of had to do something like this:

middleelementlist[x].(access the nodelist)[x].style.height

.

So in conclusion, a nodelist is essentially a specialized array, but it’s not an array in the sense that it isn’t a child of the array class, but rather a class unto its own. Gotcha. Thanks again!

It would have been this:

middleelementlist[0][x].style.height

The 0 just indicates “the first element in middleelementlist” (and there is only one - the nodelist). I would just be silly and pointless to do it this way when you can just do middleelementlist[x].

Pretty much. A nodelist is a type of object in the same way that an array is a type of object (everything in JavaScript is an object). They just happen to be very similar.