Pass varibles in a loop

ZimZangZoom · May 3, 2007

Hello,
I am looking through an array.
I want to set the onClick attribute to different elements during the loop.
Here is what I have so far

Code:

<html>
<head>

<title>My Doc</title>

<script>

function SetTabs()
{
	var TabArray = new Array();
		TabArray[0] = "FirstTab";
		TabArray[1] = "SecondTab";
		TabArray[2] = "ThirdTab";
	
	for (i in TabArray)
	{
		var tabId =TabArray[i] + "_ID"; 
		var tabName = TabArray[i]
		document.getElementById(tabId).onclick = function()
		{
			ShowTab(tabName);	
		}
	
	}
}

function ShowTab(name)
{
	alert(name)
}
</script>
</head>

<body onload="SetTabs();">
<div id="FirstTab_ID">One</div>
<div id="SecondTab_ID">Two</div>
<div id="ThirdTab_ID">Three</div>
</body>
</html>

But when I click on the div, the "name" is always the last result of the loop.

You can run the code and see what I mean.
How can I make the onclick even different each time?

BillyRayPreachersSon · May 3, 2007

There are many ways of doing this... here's one:

Code:

document.getElementById(tabId).onclick = ShowTab;

   ...

function ShowTab(eventData) {
   var whichTab = (eventData) ? eventData.srcElement : event.target;
   alert(whichTab.id);
}

AAltough, if you want your tabs to be usable by people with JS disabled, you might want to style them up as anchors, override with JS if it's enabled, but use server-side code (or different client-side styling) accordingly.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · May 3, 2007

Whoops - I got my cross-browser code the wrong way around there:

Code:

var whichTab = (eventData) ? eventData.target : event.srcElement;

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

monksnake · May 4, 2007

To be totally honest, it seems to me that what you did should work, though I can very slightly understand why it doesn't.

I rewrote your code to use the id of the divs to grab the information you want, it uses a reference "this" in the function, so that gets rid of any possible weirdness like you've experienced. The way I rewrote it makes the array TabArray redundant, so I just erased it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>

<title>My Doc</title>

<script>

function SetTabs() {
   var divArray = document.getElementsByTagName("div");
   var divArrayLength = divArray.length;
   for (i in divArray) { 
      divArray[i].onclick = function() 
      {
        ShowTab(this.id);    
      }
   }
}

function ShowTab(objId) {
    alert(objId.split("_")[0])
}

</script>
</head>

<body onload="SetTabs()">
<div id="FirstTab_ID">One</div>
<div id="SecondTab_ID">Two</div>
<div id="ThirdTab_ID">Three</div>
</body>
</html>

<.

ZimZangZoom · May 4, 2007

Thanks for your help guys.
It can see how both solutions will work,
But what if i wanted to pass more than Just the ID
(i am thinking down the road a little bit here)
What if i wanted to pass an Object to the ShowTab function?

Drew

monksnake · May 4, 2007

That would all depend on the situation. Just know it can be done. If you run into any problems, just ask.

[monkey]

<.

tsuji · May 4, 2007

>But what if i wanted to pass more than Just the ID
It is a fair question and the op's approach is too and deserve a solution of its own.

>document.getElementById(tabId).onclick = function()
> {
> ShowTab(tabName);
> }

Replace it by this.

[tt]document.getElementById(tabId).onclick=new Function("","ShowTab('"+tabName+"')");[/tt]

For more variables passing etc, the same construction.

ZimZangZoom · May 4, 2007

Thanks Guys,
I would like to take my example one step further if you dont mind..
I am trying to program with more of an Object approach, so I come into many issues..
But I have my "ITabControl" object
It can have many "Tabs" (see definition below

Code:

function ITabControl(width,height,parentControlId)
{
	this.width = width;
	this.height = width;
	this.parentControlId = parentControlId;
	[b]this.Tab = new Array();[/b]
	
	//Methods
	//this.AddTab = AddTab;
}

The ITabControl.Tab is an array of ITab objects.
So.. when a user clicks on a tab, i want to pass the Tab objects.
Below is how I tried to do it, but its still not working.

Code:

ITabControl.prototype.ApplyOnClick = function()
{
		for (var i in this.Tab)
		{
		var tabId = this.Tab[i].tabId;
		var copyOfObject = this;
		var ActiveTab= this.Tab[i];

		document.getElementById(tabId).onclick=new Function("","copyOfObject.ShowTab('"+ActiveTab+"'); return false;");
		}
}


ITabControl.prototype.ShowTab = function(ActiveTab)
{
	alert(ActiveTab.title);
}

Is this possible ?
if you need further info, please let me know and ill try and explain it more clear.

Drew

ZimZangZoom · May 4, 2007

I think I may have solved my own problem...
I have to set the click in its own function..

Code:

...
...
...
		for (var i in this.Tab)
		{
			this.SetClick(this.Tab[i])
		}

}


ITabControl.prototype.SetClick = function(Tab)
{
	var copy = this;
	document.getElementById(Tab.tabId).onclick= function() { copy.ShowTab(Tab); return false; }
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Pass varibles in a loop

ZimZangZoom

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

monksnake

Programmer

ZimZangZoom

Programmer

monksnake

Programmer

tsuji

Technical User

ZimZangZoom

Programmer

ZimZangZoom

Programmer

Similar threads

Part and Inventory Search

Sponsor