valueAsNumber将字符串转化成数字，number属性

原创于 2016-06-06 10:07:47 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

html5基础专栏收录该内容

68 篇文章

订阅专栏

本文通过一个简单的HTML页面示例，介绍了如何使用valueAsNumber属性将输入框中的字符串转换为数值类型，从而实现两个数值的相加操作。该示例对比了直接使用value属性进行字符串拼接与使用valueAsNumber进行数值计算的区别。

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

valueAsNumber将字符串转化成数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form>
			<input type="number" id="add1" >
			+
			<input type="number" id="add2">
			=
			<input type="number" id="result" readonly="readonly" onclick="onc()">
			用vlaue
			<br><br><br><br><br>
			<input type="number" id="adds1" >
			+
			<input type="number" id="adds2">
			=
			<input type="number" id="resultst" readonly="readonly" onclick="onsc()">
			用valueAsNumber
			<!--<input type="submit" value="提交">-->
		</form>
	</body> 
	
	
	<script>
	function onc(){
		//laue相加，拼接字符串
		var add1=document.getElementById("add1").value;
		var add2=document.getElementById("add2").value;
		document.getElementById("result").value=add1+add2;
	}function onsc(){
		//valueAsNumber将字符串转化成数字
		var adds1=document.getElementById("adds1").valueAsNumber;
		var adds2=document.getElementById("adds2").valueAsNumber;
		document.getElementById("resultst").valueAsNumber=adds1+adds2;
	}
		
		
	</script>
</html>