for loop

#1 July 23rd, 2005, 07:05 PM

I have written this code and it executes well but I would like to
instead of using multiple if statements write a loop that will do the
exact same thing. Can anyone help me with writing a loop?

------------ CODE ------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>

<script language="JavaScript">

<!-- Begin
function calculator(user, number){
var a=0;
var b=0;
var box1 = eval("document.chmod.Matching1")
var box2 = eval("document.chmod.Matching2")
var box3 = eval("document.chmod.Matching3")
var box4 = eval("document.chmod.Matching4")
var box5 = eval("document.chmod.Matching5")

if (box1.checked == true){
a +=(document.chmod.textField1.value*1)
}
if (box2.checked == true){
a +=(document.chmod.textField2.value*1)
}
if (box3.checked == true){
a +=(document.chmod.textField3.value*1)
}
if (box4.checked == true){
a +=(document.chmod.textField4.value*1)
}
if (box5.checked == true){
a +=(document.chmod.textField5.value*1)
}
else {
if (box1.checked == false){
b +=(document.chmod.textField1.value*1)
}
if (box2.checked == false){
b +=(document.chmod.textField2.value*1)
}
if (box3.checked == false){
b +=(document.chmod.textField3.value*1)
}
if (box4.checked == false){
b +=(document.chmod.textField4.value*1)
}
if (box5.checked == false){
b +=(document.chmod.textField5.value*1)
}
document.chmod.Matching_Funds.value=a
document.chmod.Other_Funds.value=b
}

}

</script>

</head>

<body>
<form name="chmod">
<table cellpadding="5" width="90%" border="1">
<tr>
<td colspan="3"><strong>Funding Sources</strong></td>
</tr>
<tr>
<th align="left" width="40%"> Funding Source Name </th>
<th align="left" width="30%"> Matching Funds </th>
<th align="left" width="30%"> Fund Amount </th>
</tr>
<tr>
<td><select>
<option selected>Select Funding Source</option>
<option>Funding Source 1</option>
<option>United Way</option>
<option>Red Cross</option>
</select>
</td>
<td><input type="checkbox" name="Matching1" value="1">
Yes </td>
<td>$
<input type="text" size="10" name="textField1"
onBlur="calculator('Matching', 1)"></td>
</tr>
<tr>
<td><select>
<option selected>Select Funding Source</option>
<option>Funding Source 1</option>
<option>United Way</option>
<option>Red Cross</option>
</select>
</td>
<td><input type="checkbox" name="Matching2" value="1">
Yes </td>
<td>$
<input type="text" size="10" name="textField2"
onBlur="calculator('Matching', 1)"></td>
</tr>
<tr>
<td><select>
<option selected>Select Funding Source</option>
<option>Funding Source 1</option>
<option>United Way</option>
<option>Red Cross</option>
</select>
</td>
<td><input type="checkbox" name="Matching3" value="1">
Yes </td>
<td>$
<input type="text" size="10" name="textField3"
onBlur="calculator('Matching', 1)"></td>
</tr>
<tr>
<td><select>
<option selected>Select Funding Source</option>
<option>Funding Source 1</option>
<option>United Way</option>
<option>Red Cross</option>
</select>
</td>
<td><input type="checkbox" name="Matching4" value="1">
Yes </td>
<td>$
<input type="text" size="10" name="textField4"
onBlur="calculator('Matching', 1)"></td>
</tr>
<tr>
<td><select>
<option selected>Select Funding Source</option>
<option>Funding Source 1</option>
<option>United Way</option>
<option>Red Cross</option>
</select>
</td>
<td><input type="checkbox" name="Matching5" value="5">
Yes </td>
<td>$ <input type="text" size="10" name="textField5"
onBlur="calculator('Matching', 1)"></td>
</tr>
<tr>
<td colspan="2"><strong>Matching Funds Total</strong>
</td>
<td>$ <input name="Matching_Funds" type="text" size="10"
tabindex="1"></td>
</tr>
<tr>
<td colspan="2"><strong>Other Funds Total</strong>
</td>
<td>$ <input type="text" size="10" name="Other_Funds"
tabindex="2"></td>
</tr>
<tr>
<td colspan="3"><a href="">Add Additional Funding
Sources</a><br>
</td>
</tr>
</table>
</form>
</body>
</html>

#2 July 23rd, 2005, 07:05 PM

david.jebo@gmail.com wrote:
[color=blue]
> Can anyone help me with writing a loop?[/color]

<script type="text/javascript">
function calculator() { // you didn't use arguments, so I dropped them
var a, b, i, oBox, oForm, aElems, oSumElem;
if ((oForm = document.forms["chmod"]) && (aElems = oForm.elements)) {
for (i=1, a=0, b=0; i<6; i++) {
if ((oBox = aElems["Matching" + i])) {
if (oBox.checked) {
a += oBox.value * 1;
}
else {
b += oBox.value * 1;
}
}
}
if ((oSumElem = aElems["Matching_Funds"])) {
oSumElem.value = a;
}

if ((oSumElem = aElems["Other_Funds"]) {
oSumElem.value = b;
}
}
}
</script>

BTW: for selects better use onchange, not onblur.

ciao, dhgm

#3 July 23rd, 2005, 07:05 PM

Hi David,

You can use the calculator function like this;

function calculator(user, number){
var a=0;
var b=0;

for(i=1; i<6; i++) {
if(eval("document.chmod.Matching"+i).checked==true ) {
a +=(eval("document.chmod.textField"+i+".value")*1);
}
else {
b +=(eval("document.chmod.textField"+i+".value")*1);
}
}
document.chmod.Matching_Funds.value=a
document.chmod.Other_Funds.value=b

}

#4 July 23rd, 2005, 07:05 PM

alperadatoz@gmail.com said:

[color=blue]
>function calculator(user, number){
> var a=0;
> var b=0;
>
> for(i=1; i<6; i++) {
> if(eval("document.chmod.Matching"+i).checked==true ) {
> a +=(eval("document.chmod.textField"+i+".value")*1);
> }
> else {
> b +=(eval("document.chmod.textField"+i+".value")*1);
> }
> }
> document.chmod.Matching_Funds.value=a
> document.chmod.Other_Funds.value=b
>
>}[/color]

[Most of the problems I'm pointing out appear in the original code,
but it's easier to respond here]

1. Why are user and number passed to this function?

2. You don't need to use eval() in any of these cases.
3. You don't need to compare a boolean value to true:

if(document.chmod.elements["Matching"+i].checked) {

4. The unary + operator is more efficient for converting strings to numbers.

a += +document.chmod.elements["textField"+i].value;

5. The function should be invoked by the onChange handler,
rather than by the onBlur handler.

6. You should provide some error checking for non-numeric entries.
Probably something better than:

if(isNaN(a)) {
document.chmod.Matching_Funds.value="Error - non-numeric entry";
} else {
document.chmod.Matching_Funds.value=a;
}

7. Don't forget to repeat your calculations on the server side.
Never trust dollar values computed on the user's machine.

#5 July 23rd, 2005, 07:05 PM

alperadatoz@gmail.com wrote:[color=blue]
> Hi David,
>
> You can use the calculator function like this;
>
> function calculator(user, number){
> var a=0;
> var b=0;
>
> for(i=1; i<6; i++) {
> if(eval("document.chmod.Matching"+i).checked==true ) {[/color]

eval? <gag>

if (document.chmod.elements['Matching' + i].checked)

Look Ma! No eval.....

There is also no reason to check for ==true since you are converting
boolean to boolean so just check your boolean in a boolean statement.
[color=blue]
> a +=(eval("document.chmod.textField"+i+".value")*1);[/color]

a += +document.chmod.elements['textField'+i].value;
[color=blue]
> }
> else {
> b +=(eval("document.chmod.textField"+i+".value")*1);[/color]

b += +document.chmod.elements['textField'+i].value;

Before using eval where it isn't needed, one should (at minimum) consult
this groups FAQ, where the accessing of form elements is covered very well.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

for loop

Popular Articles

What is Bytes?