欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Javascript获取value值的三种方法及注意点

程序员文章站 2022-05-07 21:45:51
...

  今天在js中用id名直接获取value值时遇到点问题，所以顺便做一下总结。

   JavaScript获取value值，主要有以下三种：

         1.用document.getElementById(“id名”).value来获取（例1）；

         2.通过form表单中的id名或者name名来获取（例2）。

        3.通过id名（不用写getElementById，也不用放在表单中）直接获取value值（例3）。但是直接通过value值获取需要注意以下几点：

         ①变量名不能和id名一样，否则无效；

         ②函数名不能和id名一样，否则无效；

         ③如果需要获取的id外面还有盒子，不能像表单那样，将盒子的name或者id写在前面，eg： var aa=box.need_id.value 是不行的，应该直接写 var aa=need_id.value ;


例1：

用document.getElementById(“id名”).value来获取

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example</title>
</head>
<body>
	<!--文本输入框-->
	<input type="text" id="input">
	<br>
	<!--通过点击click按钮，弹窗中显示文本框内用户输入的内容-->
	<input type="button" value="click" id="btn" onclick="start()">
	<script>
		function start(){
			var aa=document.getElementById("input").value;  //通过document.getElementById(“id名”).value来获取value值。
			alert(aa);
		}
	</script>
</body>
</html>

Javascript获取value值的三种方法及注意点

例2：

通过表单中的id或者name获取value值，效果和例1是一样一样的

<body>
	<form action="" name="frm">
		<!--放在表单中的文本输入框-->
		<input type="text" id="input1" name="input2" >
		<br>
		<!--通过点击click按钮，弹窗中显示文本框内用户输入的内容-->
		<input type="button" value="click" id="btn" onclick="start()">
	</form>
	<script>
		function start(){
			var aa=frm.input1.value;  //通过表单中的id获取value值;或者 var aa=frm.input2.value;通过name获取也可以。
			alert(aa);
		}
	</script>
</body>

例3：

直接通过id名获取value值，效果也和例1是一样一样的

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>example</title>
</head>
<body>
	<!--文本输入框-->
	<input type="text" name="input1" id="input2">
	<br>
	<!--通过点击click按钮，弹窗中显示文本框内用户输入的内容-->
	<input type="button" value="click" id="btn" onclick="start()">
	<script>
		function start(){
			var aa=input2.value; //直接通过id名获取value值，但是如果写 var input2=input2.value; alert(input2)则无效。
			alert(aa);
		}
	</script>
</body>
</html>





相关标签： JavaScript html value值获取

上一篇： 什么是分布式事务

下一篇： 类的属性和方法总结

推荐阅读