How do you pass an array to a function?

Hello,

I have the following JavaScript code which is of course not working. 8-)

for (LoopCount in DaysCounts) {
	 BarName = "bar" + LoopCount;
	 document.getElementById(BarName).style.height= ((300.0 / Range) * DaysCounts[LoopCount]);
	 document.getElementById(BarName).title= DaysCounts[LoopCount] + " " + AgentName + "s";
}

DayCounts is an array containing a list of integers, one for each day of the month. I am getting the following error, which I do not know how to fix. -

document.getElementById(BarName) is null

I'm also not sure if I am passing the array correctly, and can find no reference to passing an array to a function to look at. Here are my function definition header, and the call to that function.

function setCounts(AgentName, Range, DaysCounts)

setCounts(AgentName, Range, MozillaCounts);

MozillaCounts is the actual array, which is defined, and populated in a setMozillaCounts() function, which calls setCounts().

Thanks for any help you can be.

Later, Ray Parrish

Edited by Ray Parrish, 13 March 2010 - 05:31 AM.

The error is telling you that there is no element called BarName. Fire up your debugger and step through the code. Your little snippet doesn't tell me much other than how you are setting the value BarName.

Everything in Javascript is essentially an object. So arrays, integers, and functions are all objects. To pass an array, you handle it just like you would anything else.

The error is telling you that there is no element called BarName. Fire up your debugger and step through the code. Your little snippet doesn't tell me much other than how you are setting the value BarName.

Everything in Javascript is essentially an object. So arrays, integers, and functions are all objects. To pass an array, you handle it just like you would anything else.

Hello again,

Well, I realized that my code was slightly wrong in that each BarName is "bar" + LoopCount + 1 so I changed it to correct that error, and it still does not work.

I have no debugger to step through the code with. Could you recommend one?

Here is the entie script, maybe you could tell me why BarName is null after looking at it. I've previously attempted to feed variables in as an id for the document commands without success, and have had to use quoted strings where I wanted to use a variable, so I'm sure somehow that is the problem.

<script type="text/javascript">

function setCounts(AgentName, Range, DaysCounts) {

	 for (LoopCount in DaysCounts) {
		  BarNumber = LoopCount + 1
		  BarName = "bar" + BarNumber;
		  document.getElementById(BarName).style.height= ((300.0 / Range) * DaysCounts[LoopCount]);
		  document.getElementById(BarName).title= DaysCounts[LoopCount] + " " + AgentName + "s";
		  }

	 document.getElementById('titlebar').innerHTML= "<center>February " + AgentName + " Counts</center>";
	 document.getElementById('increment2').innerHTML= (Range / 6.0)
	 document.getElementById('increment3').innerHTML= ((Range / 6.0) * 2);
	 document.getElementById('increment4').innerHTML= ((Range / 6.0) * 3);
	 document.getElementById('increment5').innerHTML= ((Range / 6.0) * 4);
	 document.getElementById('increment6').innerHTML= ((Range / 6.0) * 5);
	 document.getElementById('increment7').innerHTML= ((Range / 6.0) * 6);
	 }

function setMozillaCounts() {

	 AgentName = "Mozilla Browser";
	 Range = 1200;
	 var MozillaCounts = [923, 650, 777, 1234, 555, 888, 1000, 550, 609, 806, 444, 555, 876, 456, 678, 987, 1150, 560, 179, 678, 984, 542, 567, 420, 1000, 444, 777];
	 setCounts(AgentName, Range, MozillaCounts);
	 }

</script>

Here is proof that "bar1", and "bar2" exist as ids at least. They go up to 28 of course for February.

<div class="bar" id="bar1" title="1200 Visitors" style="position: absolute; height: 33.333333333%;"></div>
<div class="bar" id="bar2" title="960 Visitors" style="position: absolute; left: 3.571428571%; height: 80px;"></div>

Thanks again, Ray Parrish

Edited by Ray Parrish, 13 March 2010 - 09:05 AM.

If you are using Firefox, you can use the Firebug pluin. If you are using IE7 or higher, you can use the built in dubugger which is accessed by hitting f12. I can't really tell from your code what might be happening. My guess is that you are going off the end of the array or something.


And some friendly advice about coding conventions to help you debug.

Variables should be declared at the beginning of the function, like this:

var i=0,
	  msg = "hello",
	  myArray = [1,2,3,4,5,6],
	  thisObject = {"message":"Hi"};

Variables in Javascript are global by default. So for instance, in one of your functions you use the variable "Range". If you accidentally use this variable name somewhere else, you are going to have unintended consequences. Using the var tag means that the variables are confined to the function in which they are used. This is good coding practice.

Here is a function from one of my projects:

function queryRemoteData(attDescription, container){

		//alert (Y.lang.JSON.stringify(attDescription));

		var ds = attDescription.AttributeDescription[0].pointerDataset,
			params = "query=attributes&as=" + ds + "&pointers=",
			i=0,
			attributes,
			pointer,
			obj,
			mappings,
			dName,
			success = function(o){					  //create seperate function for success
			   mappings = Y.lang.JSON.parse(o.responseText);

			   for(i;i<attDescription.length;i+=1){
				   pointer = attDescription[i].AttributeDescription.pointerAttribute;
				   dName = mappings[pointer];

				   if(dName !== undefined){
					   attDescription[i].AttributeDescription["displayName"] = dName;
				   }
			   }

			   expandAttributeGroup(attDescription ,container);

			},
			failure = function(o){
				error("Failed to query remote data.");
			},
			callback = {success : success, failure : failure};
		 
			........ more stuff here

All my variables are declared in one place. You will also notice that you can assign functions to a variable name also, so even functions can be passed as variables.

Hello again,

I added a couple of alert statements, and discovered that the for in loop is returning values of 01, 02, etc... instead of 1, 2, 3, etc... How in the heck do I get rid of the leading zeros???

The bar ids are bar1, bar2, etc... so the leading zero is bombing the document.getElementById method, due to there being no bar01 id to write to.

Thanks, Ray Parrish

Hello again,
I changed the code to the following, and it works.

var BarNumber = 0
	 for (LoopCount in DaysCounts) {
		  BarNumber ++;
		  BarName = "bar" + BarNumber;
		  document.getElementById(BarName).style.height= ((300.0 / RangeSize) * DaysCounts[LoopCount]);
		  document.getElementById(BarName).title= DaysCounts[LoopCount] + " " + AgentNames + "s";
		  }

For some mad reason assigning LoopCount + 1 to BarNumber always resulted in a string concatenation instead of an integer addition. Declaring BarNumber = 0 at the top solved the problem, along with dropping the addition to LoopCount.

Later, Ray Parrish

Edited by Ray Parrish, 13 March 2010 - 10:47 AM.

How are you creating your array of numbers?