for loop help

[jamiller]

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:

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...

[boogyman]

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

[Twey]

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.

[jamiller]

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.

[jscheuer1]

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:

<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:

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

[Twey]

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:

<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.

[jscheuer1]

Oops.

Added Later:

I meant:

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.