innerHTML和value打架了?
我在实现简单的前端判断验证码的过程中犯了一个低级的错误,这个错误是我平时注意的不多的地方,那就是没有区分清楚innerHTML和value的区别。。。。
现在我对这两者做出简单的区分:
innerHTML操作非表单元素的内容或文本内容,如div等;不能用于表单元素,例如:input;
value是表单元素的特有属性。非表单元素没有value属性,如div,span等;
因为我最开始没有区分二者区别,出现了如下错误:
var ranDom = document.getElementById("random").value;
var ranDomBox = document.getElementById("randomBox").value;
由此引发的后面的代码无法正确执行!
if (ranDomBox == ranDom)
{
document.getElementById("inform").innerHTML = '验证码正确';
return true;
}
<input id="randomBox" type="text" name="randomBox">
<div id="random" align="center"></div>
因为前面没有区分清楚二者区别,都使用value获取值,导致id="random"的值无法正确获取,并且浏览器不报错!
后面改正js错误后:
var ranDom = document.getElementById("random").innerHTML;
var ranDomBox = document.getElementById("randomBox").value;
代码功能实现!
innerHTML和value打架了?的更多相关文章
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- innerHTML和innerText的区别
以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...
- textarea 中的 innerHTML 和 value
<textarea></textarea> <input type="button" value="click" /> &l ...
- innerHTML on ie6-9
https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML与innerText的异同
在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...
- c#使用正则表达式抓取a标签的链接和innerhtml
//读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...
- innerHTML 与 innerText 的区别
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...
- html()、text()、val()、innerHTML、value()的区分
以上的方法可用于一般的html标签(div)与input中分别进行讨论 1.html(): jQuery方法,用于一般标签中,可读写,可以获得写入html标签. 2.text(): jQuery方法, ...
- innerHTML、innerText、outerHTML、outerText的区别
我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...
随机推荐
- golang 逃逸分析详解
疑问 请问main调用GetUserInfo后返回的&User{...}.这个变量是分配到栈上了呢,还是分配到堆上了? package main type User struct { ID i ...
- JavaScript将时间戳转化为时间
const timestampToTime= (timestamp) => { const date = new Date(timestamp * 1000); const year = dat ...
- 接口介绍以及定义和使用--java进阶day02
1.接口介绍 日常生活中有很多接口,比如手机数据线的接口和手机充电器的接口 我们转换视角,站在设计者的角度思考接口,接口体现出规则,手机的接口大小和数据线的接口大小必须一致,各种接口的大小都要一致,都 ...
- 【软件】在Windows和Ubuntu上使用TFTP和NFS
在Windows和Ubuntu上使用TFTP和NFS 零.介绍 最近在玩Linux开发板,在开发的过程中发现需要用到tftp和nfs来帮助传输文件,故此记录如何使用这两种软件. TFTP(Trivia ...
- PostgreSQL 密码忘了
许久不登, 倒是把默认的 postgres 用户的密码给忘了... 首先关闭 PostgreSQL. 我这是 Windows 上安装的, 所以到服务 (services.msc) 里关闭. 然后修改配 ...
- MySqlDataAdapter.Fill() 报异常‘给定关键字不在字典中’的解决方案
MySqlDataAdapter.Fill() 报异常'给定关键字不在字典中'的解决方案 解决办法 升级依赖库 后来发现居然是MySql.Data.dll文件版本问题,我开始使用的是6.2.1.0版本 ...
- Golang HTTPS
用golang来实现的webserver通常是是这样的 //main.go package main import ( "fmt" "io" "net ...
- FMM4在XE下使用
在project中增加 {$IFDEF DEBUG} ReportMemoryLeaksOnShutdown := True; {$ENDIF} 即可得到提示,如果内存有泄漏的话.但是想进一步仔细使用 ...
- 为Avalonia应用添加图标
前言 为了让自己开发的应用更加好看,开发者往往需要增加一些图标. 本文分享在开发Avalonia应用时如何为应用增加图标,希望可以帮助到正在学习使用Avalonia并有此需求的开发者. 实践 经过搜索 ...
- vue获取浏览器地址栏参数
this.accountId = this.$route.query.id