Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

How to initialize an array only once

Mark Hannon
Guest
  
Posts: n/a
#1: Jul 23 '05
I am trying to initialize an array only once so it can be seen & used by
any functions that need it. As I understand it, if a variable is
declared by itself outside of any functions, its scope is global and any
functions should be able to access it.

I have been having trouble getting this to work. In the 1st of the 2
examples below I initialize the Array "initArray" with 4 form text
fields. When I try to use initArray[] inside either of the 2 functions,
nothing happens. In the 2nd example, I initialize 2 different versions
of the same array from inside the 2 functions and the code works fine.
While the 2nd example works, it seems like a clumsy way to work.

How would I declare & initialize an array only once so I can use it in
any functions that need it?

Thanks,

Mark

*****************Example 1 - Doesn't work*******************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Initialize array</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

var initArray = [document.testForm.field1, document.testForm.field2,
document.testForm.field3, document.testForm.field4];

function getValuesA(){
var valuesOne = ["One", "Two", "Three", "Four"];
for(var i = 0; i <= 4; i++ ){
initArray[i].value = valuesOne[i];
}
}
function getValuesB(){
var valuesTwo = ["Five", "Six", "Seven", "Eight"];
for(var i = 0; i <= 4; i++ ){
initArray[i].value = valuesTwo[i];
}
}

</script>
</head>
<body>

<form name="testForm" action="" method="POST" enctype="text/plain">
<input name="field1" type="text" value="" size="5" maxlength="5"><br>
<input name="field2" type="text" value="" size="5" maxlength="5"><br>
<input name="field3" type="text" value="" size="5" maxlength="5"><br>
<input name="field4" type="text" value="" size="5" maxlength="5"><br>
<input name="myButton1" type="button" value="Test1"
onClick="getValuesA()">
<input name="myButton2" type="button" value="Test2"
onClick="getValuesB()">
</form>

</body>
</html>

*********************Example 2 - Works!*********************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Initialize array 2</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getValuesA(){
var initArrayA = [document.testForm.field1, document.testForm.field2,
document.testForm.field3, document.testForm.field4];
var valuesOne = ["One", "Two", "Three", "Four"];
for(var i = 0; i <= 4; i++ ){
initArrayA[i].value = valuesOne[i];
}
}
function getValuesB(){
var initArrayB = [document.testForm.field1, document.testForm.field2,
document.testForm.field3, document.testForm.field4];
var valuesTwo = ["Five", "Six", "Seven", "Eight"];
for(var i = 0; i <= 4; i++ ){
initArrayB[i].value = valuesTwo[i];
}
}

</script>
</head>
<body>

<form name="testForm" action="" method="POST" enctype="text/plain">
<input name="field1" type="text" value="" size="5" maxlength="5"><br>
<input name="field2" type="text" value="" size="5" maxlength="5"><br>
<input name="field3" type="text" value="" size="5" maxlength="5"><br>
<input name="field4" type="text" value="" size="5" maxlength="5"><br>
<input name="myButton1" type="button" value="Test1"
onClick="getValuesA()">
<input name="myButton2" type="button" value="Test2"
onClick="getValuesB()">
</form>

</body>
</html>

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Michael Winter
Guest
  
Posts: n/a
#2: Jul 23 '05

re: How to initialize an array only once

On 07 Sep 2004 16:31:57 GMT, Mark Hannon <hannonart@optonline.net> wrote:
[color=blue]
> I am trying to initialize an array only once so it can be seen & used by
> any functions that need it. As I understand it, if a variable is
> declared by itself outside of any functions, its scope is global and any
> functions should be able to access it.
>
> I have been having trouble getting this to work. In the 1st of the 2
> examples below I initialize the Array "initArray" with 4 form text
> fields. When I try to use initArray[] inside either of the 2 functions,
> nothing happens. In the 2nd example, I initialize 2 different versions
> of the same array from inside the 2 functions and the code works fine.
> While the 2nd example works, it seems like a clumsy way to work.
>
> How would I declare & initialize an array only once so I can use it in
> any functions that need it?[/color]

The code you've presented is syntactically correct[1], but it errors (I'm
surprised you didn't mention it). The reason for the error is that at the
time you attempt to get the form control references, the form hasn't been
parsed. There are two solutions:

1) Initialise the array when the load event is fired.

<body ... onload="init()">

var initArray = [];
function init() {
var fE = document.forms['testForm'].elements;

for(var i = 0; i < 4; ++i) {
initArray[i] = fE['field' + (i + 1)];
}
}

2) Store the field names and look them up in your functions

var initArray = ['field1', 'field2', 'field3', 'field4'];

function getValuesA() {
var v = ['One', 'Two', 'Three', 'Four'],
fE = document.forms['testForm'].elements;

for(var i = 0; i < 4; ++i) {
fE[initArray[i]].value = v[i];
}
}

Hope that helps,
Mike


[1] Except you'll want the for conditional expression to be 'i < 4', not
'i <= 4' otherwise you'll be accessing a non-existant array and form
element.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
oeyvind toft
Guest
  
Posts: n/a
#3: Jul 23 '05

re: How to initialize an array only once

"Mark Hannon" <hannonart@optonline.net> skrev i melding
news:413de27d$0$26144$c397aba@news.newsgroups.ws.. .[color=blue]
>
> var initArray = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];
>[/color]

document.testForm.field1 etc.. doesnt exist (undefined) at the time you
try to create your array.

You should therefore use body onload to call a function that initialize the
array.
- body onload fires when the page is finished loading
and your form exist on the document object:

You declare the array variable outside any function, in the global scope,
and initialize it inside the init function:

<script type = "text/javascript">
var initArray;
function init(){
initArray = [document.testForm.field1, document.testForm.field2,
document.testForm.field3, document.testForm.field4];
}
....rest of script...
</script>

<body onload="init();">
....rest of the page...

----------------------------------------------------[color=blue]
> function getValuesA(){
> var valuesOne = ["One", "Two", "Three", "Four"];
> for(var i = 0; i <= 4; i++ ){
> initArray[i].value = valuesOne[i];
> }
> }[/color]

The length of the array is 4 so your loops should be:
for(var i = 0; i < 4; i++ ){
}
or:
for(var i = 0; i <= 3; i++ ){
}


Oeyvind
--
http://home.online.no/~oeyvtoft/ToftWeb/



"Mark Hannon" <hannonart@optonline.net> skrev i melding
news:413de27d$0$26144$c397aba@news.newsgroups.ws.. .[color=blue]
> I am trying to initialize an array only once so it can be seen & used by
> any functions that need it. As I understand it, if a variable is
> declared by itself outside of any functions, its scope is global and any
> functions should be able to access it.
>
> I have been having trouble getting this to work. In the 1st of the 2
> examples below I initialize the Array "initArray" with 4 form text
> fields. When I try to use initArray[] inside either of the 2 functions,
> nothing happens. In the 2nd example, I initialize 2 different versions
> of the same array from inside the 2 functions and the code works fine.
> While the 2nd example works, it seems like a clumsy way to work.
>
> How would I declare & initialize an array only once so I can use it in
> any functions that need it?
>
> Thanks,
>
> Mark
>
> *****************Example 1 - Doesn't work*******************
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html><head>
> <title>Initialize array</title>
> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
> <script type="text/javascript">
>
> var initArray = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];
>
> function getValuesA(){
> var valuesOne = ["One", "Two", "Three", "Four"];
> for(var i = 0; i <= 4; i++ ){
> initArray[i].value = valuesOne[i];
> }
> }
> function getValuesB(){
> var valuesTwo = ["Five", "Six", "Seven", "Eight"];
> for(var i = 0; i <= 4; i++ ){
> initArray[i].value = valuesTwo[i];
> }
> }
>
> </script>
> </head>
> <body>
>
> <form name="testForm" action="" method="POST" enctype="text/plain">
> <input name="field1" type="text" value="" size="5" maxlength="5"><br>
> <input name="field2" type="text" value="" size="5" maxlength="5"><br>
> <input name="field3" type="text" value="" size="5" maxlength="5"><br>
> <input name="field4" type="text" value="" size="5" maxlength="5"><br>
> <input name="myButton1" type="button" value="Test1"
> onClick="getValuesA()">
> <input name="myButton2" type="button" value="Test2"
> onClick="getValuesB()">
> </form>
>
> </body>
> </html>
>
> *********************Example 2 - Works!*********************
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html><head>
> <title>Initialize array 2</title>
> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
> <script type="text/javascript">
> function getValuesA(){
> var initArrayA = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];
> var valuesOne = ["One", "Two", "Three", "Four"];
> for(var i = 0; i <= 4; i++ ){
> initArrayA[i].value = valuesOne[i];
> }
> }
> function getValuesB(){
> var initArrayB = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];
> var valuesTwo = ["Five", "Six", "Seven", "Eight"];
> for(var i = 0; i <= 4; i++ ){
> initArrayB[i].value = valuesTwo[i];
> }
> }
>
> </script>
> </head>
> <body>
>
> <form name="testForm" action="" method="POST" enctype="text/plain">
> <input name="field1" type="text" value="" size="5" maxlength="5"><br>
> <input name="field2" type="text" value="" size="5" maxlength="5"><br>
> <input name="field3" type="text" value="" size="5" maxlength="5"><br>
> <input name="field4" type="text" value="" size="5" maxlength="5"><br>
> <input name="myButton1" type="button" value="Test1"
> onClick="getValuesA()">
> <input name="myButton2" type="button" value="Test2"
> onClick="getValuesB()">
> </form>
>
> </body>
> </html>
>
> *** Sent via Developersdex http://www.developersdex.com ***
> Don't just participate in USENET...get rewarded for it![/color]
Grant Wagner
Guest
  
Posts: n/a
#4: Jul 23 '05

re: How to initialize an array only once

Mark Hannon wrote:
[color=blue]
> I am trying to initialize an array only once so it can be seen & used by
> any functions that need it. As I understand it, if a variable is
> declared by itself outside of any functions, its scope is global and any
> functions should be able to access it.
>
> I have been having trouble getting this to work. In the 1st of the 2
> examples below I initialize the Array "initArray" with 4 form text
> fields. When I try to use initArray[] inside either of the 2 functions,
> nothing happens. In the 2nd example, I initialize 2 different versions
> of the same array from inside the 2 functions and the code works fine.
> While the 2nd example works, it seems like a clumsy way to work.
>
> How would I declare & initialize an array only once so I can use it in
> any functions that need it?
>
> Thanks,
>
> Mark
>
> *****************Example 1 - Doesn't work*******************
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html><head>
> <title>Initialize array</title>
> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
> <script type="text/javascript">
>
> var initArray = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];[/color]

When this runs, the form fields do not even exist yet, let alone contain any
values. The form fields do not exist until the user agent parses the HTML much
farther down the page.
[color=blue]
> *********************Example 2 - Works!*********************
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html><head>
> <title>Initialize array 2</title>
> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
> <script type="text/javascript">
> function getValuesA(){
> var initArrayA = [document.testForm.field1, document.testForm.field2,
> document.testForm.field3, document.testForm.field4];[/color]

When this runs, the form fields exist, and probably have values in them because
you (presumably) entered them.

I don't see any value in creating a "global" array of the values of a bunch of
form elements. You already have a "global" array of their values, in the form of
document.forms['myForm'].elements[].value; Unless there are thousands of them and
you access them repeatedly over milliseconds, you might as well just retrieve the
values each time you need them.

--
Grant Wagner <gwagner@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Mark Hannon
Guest
  
Posts: n/a
#5: Jul 23 '05

re: How to initialize an array only once

Thanks for the help guys, I got the 1st example working.

Mark

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,537 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved