SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Setting the Style of an Element in an Array

    Code:
    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[x].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.
    Last edited by Audacitor; Jun 8, 2008 at 15:21. Reason: Removing a link that accesses the webserver on my home computer.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't understand why you're doing this:
    Code:
    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.
    Code javascript:
    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.
    		}
    	}
    }

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    I don't understand why you're doing this:
    Code:
    var contentelementlist = new Array(document.getElementsByName('box1000content'));
    document.getElementsByName returns an array-like nodelist which you can use by itself.
    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?

    Quote Originally Posted by Raffles View Post
    Also, you'd be better off using a normal for loop.
    Code javascript:
    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.
    		}
    	}
    }
    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!

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah. So if I wanted to get use my original code, I'd of had to do something like this:
    HTML Code:
    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!

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It would have been this:
    Code:
    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.


Tags for this Thread

Bookmarks

Posting Permissions

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