HTML小作业

最新推荐文章于 2022-11-08 23:56:36 发布

red_scard

最新推荐文章于 2022-11-08 23:56:36 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：作业心得文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/red_scard/article/details/79731718

作业心得专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript的getElementsByName()和getElementsByClassName()方法来一次性读取多个input元素的值，以便计算最大值、最小值和平均值。在处理过程中，作者遇到了将字符串转换为数值的问题，并通过parseInt()函数解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作业大致要求：有若干个input的text框用来填数值，读取其中数值，然后求出最大值最小值平均值。

一开始看别人都是用的枚举法。我就想找更简便的方法，一次性能够读取所有的拥有同一name或者是classname的方法。其实也挺简单，只要用getElementsByName()和getElementsByClassName()就行。

<form name="form1" action="" method="post">
	<table border="1px" align="center">
	<tr>
		<td>第1个:<input type="text" name="money" size="1" value="1"></td>
		<td>第2个:<input type="text" name="money" size="1" value="2"></td>
		<td>第3个:<input type="text" name="money" size="1" value="3"></td>
		<td>第4个:<input type="text" name="money" size="1" value="4"></td>
		<td>第5个:<input type="text" name="money" size="1" value="5"></td>
	</tr>
	</table>
</form>
<script type="text/javascript">
var arr = document.getElementsByName("money");
for (var i = 0; i < arr.length; i++) {
	window.alert(arr[i]);
}
</script>

然后在运算的过程中，我直接用arr[i].value读取数据时，会直接读取成为字符串，以至于对其进行+操作就变成字符串连接。于是我在循环中添加一句 var x = parseInt(arr[i].value); 然后对x进行运算才行。

以下为作业代码：

<!DOCTYPE html>
<html>
<head>
	<title>作业</title>
	<meta charset="utf-8">
</head>
<body>
<form name="form1" action="" method="post">
	<table border="1px" align="center">
	<tr>
		<td>第1个:<input type="text" name="money" size="1" value="1"></td>
		<td>第2个:<input type="text" name="money" size="1" value="2"></td>
		<td>第3个:<input type="text" name="money" size="1" value="3"></td>
		<td>第4个:<input type="text" name="money" size="1" value="4"></td>
		<td>第5个:<input type="text" name="money" size="1" value="5"></td>
		<td>第6个:<input type="text" name="money" size="1" value="6"></td>
		<td>第7个:<input type="text" name="money" size="1" value="7"></td>
		<td>第8个:<input type="text" name="money" size="1" value="8"></td>
		<td>第9个:<input type="text" name="money" size="1" value="9"></td>
		<td>第10个:<input type="text" name="money" size="1" value="10"></td>
	</tr>
	<tr>
		<td>最大值:<input type="text" id="maxx" size="1"></td>
		<td>最小值:<input type="text" id="minn" size="1"></td>
		<td>平均值:<input type="text" id="arve" size="1"></td>
		<td><input type="button" name="buttonn" onclick="fun()" value="计算"></td>
	</tr>
	</table>
</form>

<script type="text/javascript">

for (var i = 0; i < arr.length; i++) {
	window.alert(arr[i]);
}

function fun(){
	var arr = document.getElementsByName("money");
	var sum = 0;
	var max = 0;
	var min = 0;
	for (var i = 0; i < arr.length; i++) {
		var x = parseInt(arr[i].value);
		sum = sum + x;
		if(arr[max].value < x)
			max = i;
		if(arr[min].value > x)
			min = i;
	}
	document.getElementById("maxx").value = arr[max].value;
	document.getElementById("minn").value = arr[min].value;
	document.getElementById("arve").value = sum/arr.length;
}
</script>
</body>
</html>