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

时间:2023-03-08 16:58:06
Javascript获取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>

例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>