添加到数组中的 Javascript 表单元素，然后对元素求和答案

【问题标题】：Javascript form elements added to an array and then totaling the elements添加到数组中的 Javascript 表单元素，然后对元素求和
【发布时间】：2013-10-11 21:33:51
【问题描述】：

我需要创建一个接受用户输入（整数）的表单，将该输入添加到数组中，然后对整数求和并将它们的总数作为文本显示在网页上。我觉得我已经接近解决方案了，但是当我按下提交按钮时，什么也没有发生。我对 Javascript 很陌生，这是一个课堂作业。谁能判断这段代码是否正确或建议哪里可能有错误？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding Numbers</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p><script type="javascript">
/* <![CDATA[ */
function addNums() {
var total = 0;
var intergers = new Array(5);
intergers[0] = document.forms[0].element[0].value;
intergers[1] = document.forms[0].element[1].value;
intergers[2] = document.forms[0].element[2].value;
intergers[3] = document.forms[0].element[3].value;
intergers[4] = document.forms[0].element[4].value;
for (i=0; i<intergers.length; i++) {
    total += intergers[i];
    }
return total;
document.write("The total for the intergers entered is " + total + "."</p>);
}   

/* ]]> */
</script><strong>Please enter an interger into each of the following text boxes.<br />
Press the Submit button to see a total of all the intergers.</strong></p>
<form action="" name="intergers" onsubmit="addNums();" >    
<p>1st Interger<br/>
    <input type="text" name="num1" value="" size="10" /></p>
<p>2nd Interger<br/>
    <input type="text" name="num2" value="" size="10" /></p>
<p>3rd Interger<br/>
    <input type="text" name="num3" value="" size="10" /></p>
<p>4th Interger<br/>
    <input type="text" name="num4" value="" size="10" /></p>
<p>5th Interger<br/>
    <input type="text" name="num5" value="" size="10" /></p>
<p><input type="button" name="submit" value="Submit" /></p> 
</form>
</body>
</html>`enter code here`

【问题讨论】：

标签： javascript arrays forms

【解决方案1】：

首先，你的所有整数都有一个额外的R！ :-)

您的代码的一个问题是输入值始终是字符串，并且 JavaScript 使用 + 进行数字加法和字符串连接。在添加它们之前，您必须将所有值强制转换为数字：

for (i=0; i<intergers.length; i++) {
    total += parseInt(intergers[i], 10);
}

或

for (i=0; i<intergers.length; i++) {
    total += +intergers[i], 10;
}

编辑：还有其他几个问题，我刚刚意识到......其中一些：

不要在脚本标签中使用type="javascript"，只需将其删除即可。
document.forms[0] 上没有 element 属性。那应该是elements。
您的按钮也将被列为这些元素之一...
你必须阻止你的表单subiting，否则你将永远看不到结果
您试图在双重错误的上下文中使用document.write：页面已经加载（因此它会在输出之前擦除整个页面），并且您试图在@987654330 之后调用它@ 语句（没有可访问的代码）。
您在 document.write 的调用中还有一个 </p>，这会导致语法错误。
提示：打开浏览器的开发者工具，并始终检查控制台是否有错误。

【讨论】：

您在第一点w3.org/TR/xhtml1/diffs.html 上大错特错。仅仅因为浏览器“更正”，即转换为 html，您应该首先编写 html 或正确执行 xhmtl。
好的，我意识到关于 CDATA 的部分不正确，我删除了它。无论如何，我假设 OP 只使用 XHTML 文档类型，因为他从其他地方复制/粘贴了结构。建议使用 HTML5（甚至是严格的 HTML4）。