By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,217 Members | 1,309 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,217 IT Pros & Developers. It's quick & easy.

How to initialize an array only once

P: n/a
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!
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 07 Sep 2004 16:31:57 GMT, Mark Hannon <ha*******@optonline.net> wrote:
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?


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.
Jul 23 '05 #2

P: n/a
"Mark Hannon" <ha*******@optonline.net> skrev i melding
news:41**********************@news.newsgroups.ws.. .

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

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...

---------------------------------------------------- function getValuesA(){
var valuesOne = ["One", "Two", "Three", "Four"];
for(var i = 0; i <= 4; i++ ){
initArray[i].value = valuesOne[i];
}
}
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" <ha*******@optonline.net> skrev i melding
news:41**********************@news.newsgroups.ws.. . 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!

Jul 23 '05 #3

P: n/a
Mark Hannon wrote:
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];
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.
*********************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];


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 <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

Jul 23 '05 #4

P: n/a
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!
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.