5 numbers added with a FOR loop

**JagvsShodan** · 04-28-2006, 03:07 AM

I'm very new to JavaScript and am faced with the problem of making a function that declares an array of five numbers. Initialize the five values from textboxes in a form. Using a for loop, sum the elements of the array and display the result on the web page when the submit button is clicked. that will take.

here is what I have ... I hope it isn't way off:

<script type="text/javascript">

</script>

<form>
<p>Insert a number in each text space and click "submit."</p>
<input type="text" name="num1">
<input type="text" name="num2">
<input type="text" name="num3">
<input type="text" name="num4">
<input type="text" name="num5">
<input type="button" value="Submit" onclick="numbers();" />
</form>

any help with this?

thanks

**jscheuer1** · 04-28-2006, 06:33 AM

Using parseInt() is probably safer but, multiplying by one seems a better choice if it works, and it does in Opera8.54 FF1.5.2 and IE6. Hiding is useless. You had a number of minor errors and using document.write will, of course, overwrite your page so I made a readonly answer field:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function numbers() {
var answer = 0,
n = new Array();
n[0] = 1*document.forms[0].num1.value;
n[1] = 1*document.forms[0].num2.value;
n[2] = 1*document.forms[0].num3.value;
n[3] = 1*document.forms[0].num4.value;
n[4] = 1*document.forms[0].num5.value;
for (var count = 0; count < 5; count++)
answer += n[count];
document.forms[0].ans.value=answer;
}
</script>
</head>
<body>
<form>
<p>Insert a number in each text space and click "submit."</p>
<input type="text" name="num1">
<input type="text" name="num2">
<input type="text" name="num3">
<input type="text" name="num4">
<input type="text" name="num5">
<input type="button" value="Submit" onclick="numbers();" /><br>
Answer: <input type="text" readonly name="ans">
</form>
</body>
</html>

**Twey** · 04-28-2006, 06:42 AM

The comment delimiters are unnecessary. So's the whole script block, actually. And why have you used an XHTML-style input tag for the button, but HTML-style for everything else? Also, the method and action attributes of <form> are required.

Code:

<form action="" method="post">
<p>Insert a number in each text space and click "submit."</p>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<p id="total"></p>
<input type="button" value="Submit" onclick="
  var total = 0,
    e = document.forms[0].elements,
    tmp = 0;
  for(var i=0;i<e.length;i++) if(!isNaN(tmp = parseInt(e[i].value))) total += tmp;
  document.getElementById('total').innerHTML = total;
">
</form>

/EDIT: John seems to have beaten me to it, but my code is shorter, so I'll leave it here so you can choose.

**JagvsShodan** · 04-28-2006, 11:36 AM

Thank you both for your help. As for yall's questions, that's just how this low-end JavaScript book teaches it.

Thread: 5 numbers added with a FOR loop

Thread Tools

Search Thread

5 numbers added with a FOR loop

Bookmarks

Bookmarks

Posting Permissions