2013-10-11 136 views
0

我需要创建一个接受用户输入(整数)的表单,将该输入添加到数组中,然后对整数进行求和并在网页上显示其总数为文本。我觉得我接近解决方案,但是,当我按下提交按钮时,没有任何反应。我对Javascript很陌生,这是一个班级任务。任何人都可以告诉这段代码看起来是正确的还是建议哪里可能有错误?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` 

回答

0

首先,你有你的所有整数额外[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
  • 你的按钮也将被列为其中一个元素...
  • 你必须防止您的形式从subitting,否则你将永远不会看到的结果是
  • 你试图在上下文中使用document.write在那里它是双重错误的:页面已经被加载(所以它会在输出之前擦除整个页面),并且你试图在return语句(其中没有代码可达)之后调用它。
  • 对document.write的调用中还有一个</p>,这会导致语法错误。
  • 提示:打开浏览器的开发人员工具,并始终检查控制台是否有错误。
+0

你对你的第一点http://www.w3.org/TR/xhtml1/diffs.html是非常错误的。只是因为浏览器“纠正”即转换为HTML,您应该首先编写html或正确执行xhmtl。 – jeff

+0

好的,我意识到关于CDATA的部分是不正确的,我删除了它。无论如何,我认为OP仅使用XHTML文档类型,因为他从其他地方复制/粘贴了结构。建议使用HTML5(甚至是HTML4严格)。 – bfavaretto