Forum Moderators: open

Message Too Old, No Replies

Passing an argument to array notation

do not completely understand how you pass an argument to array notation

         

MarcMiller

11:05 pm on Oct 2, 2005 (gmt 0)

10+ Year Member




I have been trying to write a function to change images on a page. The function is to use three arguments. One being the image object name. The other two being the name of a dense array I create to put my images in and the element number in that array. My function works fine if I passed the image argument object name inside single quotes. I can also pass it the element number of the built-in image array and that works as well. However when I pass at the argument of the image object name without quotes my function fails. And the Firefox JavaScript console generates the following error "Error: chpeople is not defined" which I am having trouble understanding why since I have read that the default data type for JavaScript is strings. Is this not the case for arguments too. Can somebody tell me how I might modify my function so I may pass the image object argument name and why it works this way at present. Below is my function with some comments which hopefully explain what I am talking about.
Thanks Marc

<!--<HTML>
<HEAD>
<TITLE>imagesByButtos</TITLE>

<SCRIPT TYPE="text/javascript">

var pr1= new Image();
pr1.scr="images1.jpeg"

var pr2= new Image();
pr2.scr="images2.jpeg"

var pr3= new Image();
pr3.scr="images3.jpeg"

var pr4= new Image();
pr4.scr="images4.jpeg"

var pr5= new Image();
pr5.scr="images5.jpeg"

var pr6= new Image();
pr6.scr="images6.jpeg"

var people=new Array( pr1.scr, pr2.scr, pr3.scr, pr4.scr, pr5.scr, pr6.scr);

function chImage(imageName, arrayName, elementNum)
{

document.images[imageName].src = arrayName[elementNum ];
}

</SCRIPT>
</HEAD>
<!-- <BODY onload="chImage( chpeople, people,5)"> can't pass chpeople to function this way -->
<!--<BODY onload="chImage( chpeople, people,5)"> can pass 'chpeople' to function this way -->
<BODY onload="chImage(0, people,5)"> <!-- can pass zero to function this way -->
<IMG NAME = "chpeople" SRC="images1.jpeg" BORDER="0" ALIGN="bottom" ALT="changing people"><BR>
</BODY>
</HTML>-->

Bernard Marx

7:44 am on Oct 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




You a dealing with different types of referencing.

However when I pass at the argument of the image object name without quotes my function fails.

This is because the image name is a name - it is not a global variable holding the image of that name. Some browsers may, in the past, have flatted element names and ids into globals (IE still does with ids) but it's not a reliable technique.

You are referencing image objects via the document.images collection. Like all collections, the member elements can be referenced by source index, id or name (if an image, form element or frame) so you need

document.images["_name_"]
//or
document.images[_index_]

If you don't use quotes on the string, then javascript sees it as a variable, and then turn that into a string for the array access, so you effectively get:

document.images["undefined"]

I have read that the default data type for JavaScript is strings.

There is no default data type.

--------------------------------------

function chImage(imageName, array, elementNum) 
{
document.images[imageName].src = arrayName[elementNum ];
}

...

chImage('chpeople', people, 5)"> ');

//
--------- easier?---------------------
//

function chImage(imageElmName, src ) 
{
document.images[imageName].src = src;
}

...

chImage('chpeople', people[5] )"> ');

//
---------------------------------------
//

Serious typographical error.

You are using scr not src. It still works because objects can have arbitrary properties added to them. However, the preloading won't happen.

MarcMiller

9:17 am on Oct 3, 2005 (gmt 0)

10+ Year Member



Gee I'm having trouble understanding the answer. But that typo pointing out is certainly helpful. I am thinking if you use quotes you are explicitly telling JavaScript it's a stirring so if JavaScript changes it into a string anyway that's what you want. I am also wondering is the bottom part of the answer a proposed alternative function. If so what is a great than symbol ">" mean in a function. I am pretty newbie to JavaScript. I see from my reading that JavaScript on methods sometimes require you to use quotes on things you pass to it. So I guess I could except that if I have to. I was thinking I could pass the argument to a function without quotes and build quote concatenation into my function. Or am I mistaking.
Truly Marc

Bernard Marx

10:38 am on Oct 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you don't mind me saying, you sound a little confused.


[b]A)[/b] myFunction[red]([/red][green]"hello"[/green][red])[/red]

[b]B)[/b] myFunction[red]([/red]hello[red])[/red]


In case (A) we're passing a string to the function. It is string "literal", that is to say it is nothing more than what it contains.

In case (B) we're passing a variable (the bread & butter of all programming). What value that variable has depends on the value we have given it, and in what scope the statement is executing in
- there may be a global variable,

hello
, but also a local variable,
hello
, with a different value, in the function we are excuting the statement.

In the above, we have neither declared nor initialised

hello
, so we'll get an error immediately.

Under no circumstances, will

hello
be converted into the string,
"hello"
, unless that is the value it actually holds. Things like this are occasionally allowed in PHP, but not Javascript.

However, it is possible, in various ways, to use the string,

"hello"
, to get and use the value of the variable,
hello
.
...but that's not under discussion here.

Summary:

A string literal is a string literal; a variable name is a variable name.

Bernard Marx

11:08 am on Oct 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's worth adding this...

You can set, access or change the properties of any (touch wood) object that you will come across in Javascript in 2 ways:

To demo this, I'll create a Javascript Object-type object. This is just to make things easy, but the concept applies to all objects, including document elements.

// create an object with a property¦value
var obj1 = {bananas: 1};

alert( obj1.bananas );
alert( obj1["bananas"]);
// or even
alert(ob1["bana"+"nas"]);

Object properties are actually stored internally as strings. This is why the following statement, from your code, works:

document.images[imageName].src = ...

If we want to reference an image with the name, "image1", then we can:

document.images.image1;
//or
document.images["image1"];
// or,
// if we have a variable, imageName = "image1";
document.images[imageName];
// but this will not work
// (a common mistake)
document.images.imageName;


In PHP, you can access an array member without using quotes:

$myArray[bananas]

You'll get away with a warning. The environment in PHP is different, because PHP knows you are not expecting the value of a variable,

$bananas
, to be used, because we haven't used a
$
.

In JS, the only property access that can be made without quotes (optional) is, as you know, numerical index:

myArray[5]