Log in

View Full Version : 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">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var n = new Array();
n[0] = parseInt(document.form[0].num1.value);
n[1] = parseInt(document.form[0].num2.value);
n[2] = parseInt(document.form[0].num3.value);
n[3] = parseInt(document.form[0].num4.value);
n[4] = parseInt(document.form[0].num5.value);
function numbers() {
for (var count = 0; count < 4; ++count) {
var answer = answer + n[count];
document.write(answer);
}
}

//STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</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:


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