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>
Javascript获取value值的三种方法及注意点的更多相关文章
- javascript 获取html元素的三种方法
操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
- JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...
- JavaScript获取鼠标位置的三种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- Java中获取键盘输入值的三种方法
Java中获取键盘输入值的三种方法 Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...
- javascript生成新标签的三种方法
javascript生成新标签的三种方法:http://www.cnblogs.com/online-link/p/6062423.html
- Mybatis+Mysql插入数据库返回自增主键id值的三种方法
一.场景: 插入数据库的值需要立即得到返回的主键id进行下一步程序操作 二.解决方法: 第一种:使用通用mapper的插入方法 Mapper.insertSelective(record): 此方法: ...
- 获取class对象的三种方法以及通过Class对象获取某个类中变量,方法,访问成员
public class ReflexAndClass { public static void main(String[] args) throws Exception { /** * 获取Clas ...
- shell获取本地ip的三种方法
第一种方法:ifconfig|grep inet |awk '{print $2}'|sed '2d'|awk -F : '{print $2}'第二种方法:ifconfig|grep inet|se ...
随机推荐
- DB(1):SQLAPI catch [Bind variable/parameter 'pay_acc_id' not found] !!!
SQLAPI catch [Bind variable/parameter 'pay_acc_id' not found] !!! 出现这种报错,先检查命令类后面的参数是否混淆(SACommand s ...
- 数据库基础——跟着【克里斯学SQL】哈哈。
前言: 很多同学呀,对数据库的操作仅仅只能在于Navicat 等第三方可视化的工具上面!!!! 这是可怕的,数据库的操作十分的重要,甚至,他是程序最重要的部分. 面试经常问题, 了解那个数据? 写一个 ...
- centos6.5 配置静态IP
1.修改网卡配置 编辑:vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOOTPROTO=static HWADDR=08:00:2 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- sqlyog试用期到期--win10
1.win+R打开搜索框,输入regedit,打开windows注册表 2.删除HKEY_CURRENT_USER 下 software 的前几个随机编码.
- webbrowser设置为相应的IE版本
注册表路径: HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATU ...
- docker方式mysql设置字符集
在docker上部署mysql时,mysql的默认字符集是latin1,这样如果日后有中文会出现异常,不能存储等,因为latin1是不支持中文的. 所以需要将字符集调整为utf8. 方法: 首先启动m ...
- 2018-2019-2 20165325《网络对抗技术》Exp0 Kali安装 Week1
2018-2019-2 20165325<网络对抗技术>Exp0 Kali安装 Week1 一.安装kali VMware上学期已经有了,主要是下载Kali-Linux-2019.1-vm ...
- win10下安装Cygwin配置gcc编译环境
首先要说明的是,我个人安装cygwin的用途是为了使用kenlm工具训练通及语言模型. 注:统计语言模型工具有比较多的选择,目前比较好的有srilm以及kenlm,其中kenlm比srilm晚出来,训 ...
- 虚拟机上的centos7链接不上网络: activation of network connection failed
报错: 重启网络也不行: 解决: 1.打开网络配置文件: $vi /etc/sysconfig/network-scripts/ifcfg-ens33 (可以参照这里的描述,找到这个文件https: ...