Results 1 to 7 of 7

Thread: for loop help

  1. #1
    Join Date
    Jan 2007
    Location
    Charlotte, NC
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question for loop help

    Man. I'm all over this site today

    So I have a menu with 6 entries. Each of these entries has a sub menu. I have written a for loop to handle all the onclicks so I didn't have to write them all out myself. I am now trying to get the cooresponding sub menu div to show up when a btn is rolled over.

    Here is the part of my code that I need help with:
    Code:
    for(var i=1; i<=6; i++) {
    	var btn = document.getElementById('TT'+i); //my li id
    	var subMenu = document.getElementById('AA'+i); //my sub menus
    	btn.onmouseover = function() {
    		dropdownmenu(this, event, 'AA1'); //'AA1' refers to the sub menu div on the html side. I need to replace this with something else... That's where you come in :) Right now every "btn" opens up div AA1.
    	}
    }
    I should also mention that I'm a front-end designer. And I have a large background in Flash so my JavaScript is written very similar to AS.

    This should be an easy one for you experienced coders. I'm not suppost to code and I have been all day. It's frying my little brain...

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Code:
    btn.onmouseover = function() {
    		dropdownmenu(this, event, 'AAi');
    I believe the 1 should be an i to stay consistent with the rest of your code. not tested but at first glance that's what I noticed

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    for(var i = 1, btn; btn = document.getElementById("TT" + i); ++i)
      btn.onmouseover = (function(i) {
        return function(e) {
          dropdownmenu(this, e || event, 'AA' + i);
        };
      })(i);
    btn = null;
    Your coding practices are mostly good, but you need to watch out for browser differences. Only IE uses event, and it will leak if you leave btn trapped in the closure.
    Last edited by Twey; 04-27-2007 at 08:39 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Jan 2007
    Location
    Charlotte, NC
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Wow. I cannot believe that worked. I'm glad I got on this forum. I would have NEVER figured that one out!

    Thanks Twey!

    Oh, and I know all about browser differences. Yet another reason I hate html over Flash. At this, my new job, I work a lot with html and my last job was all Flash. But this is for an in-house training video player so I can decide the browser used . If the vids weren't so large I would have chosen Flash but all the importing of the files would have crashed Flash. In html I can simply embed the .avi so it works better.
    Last edited by jamiller; 04-27-2007 at 09:01 PM. Reason: i wanted to

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    Code:
    for(var i = 1, btn; btn = document.getElementById("TT" + i); ++i)
      btn.onmouseover = (function(i) {
        return function(e) {
          dropdownmenu(this, e || event, 'AA' + i);
        };
      })(i);
    btn = null;
    Your coding practices are mostly good, but you need to watch out for browser differences. Only IE uses event, and it will leak if you leave btn trapped in the closure.
    You've over thought this. Event is just fine in all modern browsers when used in the way it is in the code. It works out to:

    HTML Code:
    <li onmouseover="dropdownmenu(this, event, 'AA1');">
    Which is fine. But, I think boogyman was onto something. However, you cannot just pass i to the assigned function that way. Here's one way:

    Code:
    for(var i=1; i<=6; i++)
    document.getElementById('TT'+i).onmouseover = new Function("dropdownmenu(this, event, 'AA"+i+"');");
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    I think boogyman was onto something. However, you cannot just pass i to the assigned function that way. Here's one way:
    Ugh! That's essentially as bad as using eval(), and very poor practice. The problem you're trying to address there is the one I've solved above by creating a separate scope for i. See the comp.lang.javascript FAQ notes on closures for a description of this problem.
    You've over thought this. Event is just fine in all modern browsers when used in the way it is in the code. It works out to:
    HTML Code:
    <li onmouseover="dropdownmenu(this, event, 'AA1');">
    No, it doesn't. That HTML will work because by default, the first parameter which is passed to the function is also named "event" in browsers that don't use the global event object. However, since we're assigning it through Javascript, that doesn't happen, and if we manually name the argument "event" then IE will see that too, but no value will be passed for it so event will exist but be undefined within the function body.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Oops.

    Added Later:

    I meant:

    Code:
    for(var i=1; i<=6; i++)
    document.getElementById('TT'+i).onmouseover = new Function("e", "dropdownmenu((e?e.target:event.srcElement), (e?e:event), 'AA"+i+"');");
    Not really, but that would work.
    Last edited by jscheuer1; 04-27-2007 at 09:37 PM. Reason: Just for Fun
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •