我在实现简单的前端判断验证码的过程中犯了一个低级的错误,这个错误是我平时注意的不多的地方,那就是没有区分清楚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打架了?的更多相关文章

  1. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  2. innerHTML和innerText的区别

    以<p id="example">welcome to <strong>JavaScript</strong> !!!</p>为例: ...

  3. textarea 中的 innerHTML 和 value

    <textarea></textarea> <input type="button" value="click" /> &l ...

  4. innerHTML on ie6-9

    https://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx The innerHTML property is read-only on ...

  5. innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法

    在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...

  6. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  7. c#使用正则表达式抓取a标签的链接和innerhtml

    //读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...

  8. innerHTML 与 innerText 的区别

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签.innerText 指的是从起始位置到终止位置的内容,但它去除Html标签.同时,innerHTML 是所有浏览器都支持 ...

  9. html()、text()、val()、innerHTML、value()的区分

    以上的方法可用于一般的html标签(div)与input中分别进行讨论 1.html(): jQuery方法,用于一般标签中,可读写,可以获得写入html标签. 2.text(): jQuery方法, ...

  10. innerHTML、innerText、outerHTML、outerText的区别

    我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...

随机推荐

  1. golang 逃逸分析详解

    疑问 请问main调用GetUserInfo后返回的&User{...}.这个变量是分配到栈上了呢,还是分配到堆上了? package main type User struct { ID i ...

  2. JavaScript将时间戳转化为时间

    const timestampToTime= (timestamp) => { const date = new Date(timestamp * 1000); const year = dat ...

  3. 接口介绍以及定义和使用--java进阶day02

    1.接口介绍 日常生活中有很多接口,比如手机数据线的接口和手机充电器的接口 我们转换视角,站在设计者的角度思考接口,接口体现出规则,手机的接口大小和数据线的接口大小必须一致,各种接口的大小都要一致,都 ...

  4. 【软件】在Windows和Ubuntu上使用TFTP和NFS

    在Windows和Ubuntu上使用TFTP和NFS 零.介绍 最近在玩Linux开发板,在开发的过程中发现需要用到tftp和nfs来帮助传输文件,故此记录如何使用这两种软件. TFTP(Trivia ...

  5. PostgreSQL 密码忘了

    许久不登, 倒是把默认的 postgres 用户的密码给忘了... 首先关闭 PostgreSQL. 我这是 Windows 上安装的, 所以到服务 (services.msc) 里关闭. 然后修改配 ...

  6. MySqlDataAdapter.Fill() 报异常‘给定关键字不在字典中’的解决方案

    MySqlDataAdapter.Fill() 报异常'给定关键字不在字典中'的解决方案 解决办法 升级依赖库 后来发现居然是MySql.Data.dll文件版本问题,我开始使用的是6.2.1.0版本 ...

  7. Golang HTTPS

    用golang来实现的webserver通常是是这样的 //main.go package main import ( "fmt" "io" "net ...

  8. FMM4在XE下使用

    在project中增加 {$IFDEF DEBUG} ReportMemoryLeaksOnShutdown := True; {$ENDIF} 即可得到提示,如果内存有泄漏的话.但是想进一步仔细使用 ...

  9. 为Avalonia应用添加图标

    前言 为了让自己开发的应用更加好看,开发者往往需要增加一些图标. 本文分享在开发Avalonia应用时如何为应用增加图标,希望可以帮助到正在学习使用Avalonia并有此需求的开发者. 实践 经过搜索 ...

  10. vue获取浏览器地址栏参数

    this.accountId = this.$route.query.id