Add functions onload 1

[vicvirk]

This is something that has me stumped, I have the following table:

<table border="1" id="tblNav">
	<tr>
		<td width="130">
			<a id="nav_0" href="/home/" >HOME</a>
		</td>
		<td width="130">
			<div><a id="nav_1" href="/about/">ABOUT</a>
		</td>
		<td width="130">
			<a id="nav_2" href="/contact/">CONTACT</a>
		</td>
	</tr>
</table>

I want to add an onmouseover/onmouseout to each "A" tag onload and can do it if I access each one individually:

window.onload = function () {
	$("nav_0").onmouseover = function () { toggleNav(0); }
	$("nav_0").onmouseout = function () { toggleNav(0); }
	$("nav_1").onmouseover = function () { toggleNav(1); }
	$("nav_1").onmouseout = function () { toggleNav(1); }
	$("nav_2").onmouseover = function () { toggleNav(2); }
	$("nav_2").onmouseout = function () { toggleNav(2); }
}

But I want to put that into a loop, which doesn't work

window.onload = function () {
	var navItems = $("tblNav").getElementsByTagName("a");
		for (var i = 0 ; i < navItems.length ; i++) {
		navItemId = navItems[i].id;
		$(navItemId).onmouseover = function () { toggleNav(i); }
		$(navItemId).onmouseout = function () { toggleNav(i); }
	}
}

Here is the full code of my attempt:

<script language="javascript">
function $(strInput) {
	return document.getElementById(strInput);
}

window.onload = function () {
	var navItems = $("tblNav").getElementsByTagName("a");
	for (var i = 0 ; i < navItems.length ; i++) {
		navItemId = navItems[i].id;
		$(navItemId).onmouseover = function () { toggleNav(i); }
		$(navItemId).onmouseout = function () { toggleNav(i); }
	}
}


var strOn = "GO HOME,WHO WE ARE,TALK TO US";
var strOff = "HOME,ABOUT,CONTACT";
var raOn = strOn.split(",");
var raOff = strOff.split(",");



function toggleNav(intItem) {
	$("nav_" + intItem).innerHTML 
	= ($("nav_" + intItem).innerHTML == raOn[intItem]) 
	? raOff[intItem] 
	: raOn[intItem];
}
</script>

<table border="1" id="tblNav">
	<tr>
		<td width="130">
			<a id="nav_0" href="/home/" >HOME</a>
		</td>
		<td width="130">
			<div><a id="nav_1" href="/about/">ABOUT</a>
		</td>
		<td width="130">
			<a id="nav_2" href="/contact/">CONTACT</a>
		</td>
	</tr>
</table>

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[feherke]

Hi

Not a nice solution, but is the only I know :

window[teal].[/teal]onload[teal]=[/teal][b]function[/b] [teal]()[/teal] [teal]{[/teal]
  [b]var[/b] navItems[teal]=[/teal]$[teal]([/teal][green][i]'tblNav'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'a'[/i][/green][teal]);[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal]i[teal]<[/teal]navItems[teal].[/teal]length[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
    navItems[teal][[/teal]i[teal]].[/teal]nr[teal]=[/teal]i[teal];[/teal]
    navItems[teal][[/teal]i[teal]].[/teal]onmouseover[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [COLOR=darkgoldenrod]toggleNav[/color][teal]([/teal][b]this[/b][teal].[/teal]nr[teal])[/teal] [teal]}[/teal]
    navItems[teal][[/teal]i[teal]].[/teal]onmouseout[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal] [COLOR=darkgoldenrod]toggleNav[/color][teal]([/teal][b]this[/b][teal].[/teal]nr[teal])[/teal] [teal]}[/teal]
  [teal]}[/teal]
[teal]}[/teal]

By the way, if you have the reference to an object is pointless to get the referred object's [tt]id[/tt] to get a reference to the object by [tt]id[/tt].

Feherke.

http://rootshell.be/~feherke/

 

[vicvirk]

cool - that worked - thanks...

2 questions, however:

1. what is the "nr" mean? I'm sure I could have used anything there (i.e. ar, jr, az...etc) but what exactly does that do?

2. What is it not a nice solution? what is a better way to do it?



--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[feherke]

Hi

what is the "nr" mean?

In JavaScript the objects are prototype based, not class based. It allows to add new properties to the objects in runtime. The nr is just a new property to hold the i counter's given value, so will not be affected by later changes of i.

What is it not a nice solution?

Well, probably just my personal concept. I feel that adding new properties to the core objects is messy. I would prefer a cleaner one.


Feherke.

http://rootshell.be/~feherke/