How to initialize an array only once

M

Mark Hannon

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.value = valuesOne;
}
}
function getValuesB(){
var valuesTwo = ["Five", "Six", "Seven", "Eight"];
for(var i = 0; i <= 4; i++ ){
initArray.value = valuesTwo;
}
}

</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.value = valuesOne;
}
}
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.value = valuesTwo;
}
}

</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>
 
M

Michael Winter

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?
Click to expand...

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 = 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].value = v;
}
}

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

oeyvind toft

Mark Hannon said:
var initArray = [document.testForm.field1, document.testForm.field2,
document.testForm.field3, document.testForm.field4];
Click to expand...

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.value = valuesOne;
}
}
Click to expand...


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 said:
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.value = valuesOne;
}
}
function getValuesB(){
var valuesTwo = ["Five", "Six", "Seven", "Eight"];
for(var i = 0; i <= 4; i++ ){
initArray.value = valuesTwo;
}
}

</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.value = valuesOne;
}
}
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.value = valuesTwo;
}
}

</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>
Click to expand...
 
G

Grant Wagner

Mark said:
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];
Click to expand...

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];
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to display input options only after selecting an option from the 'select class' tag JS? 6
Only one table shows up with the information 2
Passing flask textbox value to an infinite while loop 0
How to treat an input data as variable? 4
I dont get this. Please help me!! 2
Reversing output of user input by using while loop... 2
How to position the *tooltip* comment on these buttons? 9
How to store data from a sign up form on a website into an sql databse 1

Members online

Total: 24 (members: 1, guests: 23)
Robots: 178

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,149
Latest member
Vinay Kumar Nevatia0

Latest Threads

Top